kanji stroke order font script for anki

kanji stroke order font script for anki - Printable Version

+- kanji koohii FORUM (http://forum.koohii.com)
+-- Forum: Learning Japanese (http://forum.koohii.com/forum-4.html)
+--- Forum: Learning resources (http://forum.koohii.com/forum-9.html)
+--- Thread: kanji stroke order font script for anki (/thread-7099.html)

kanji stroke order font script for anki - Irwin1138 - 2011-01-20

Hi there, I thought it would be nice to share a little script I wrote. I wanted a convenient way to get the stroke order info right there when I'm doing reps, without the hassle of copy-pasting to the browser or (oh lord) searching the RTK book.

I could just replace the default Arial font with it but I like Arial more.

You need to get the KanjiStrokeOrders font and install it in your system. I use Windows dunno how to do it in CunniLinux.

You just hover the cursor over the kanji and it changes the font showing you the stroke order.

Here is the script:

Code:

<script language="JavaScript">

function toggleFont()

{

  var _font = document.getElementsByTagName('span')[0].style.fontFamily;

  if(_font != 'KanjiStrokeOrders') {

    document.getElementsByTagName('span')[0].style.fontFamily = 'KanjiStrokeOrders';

  }

  else {

    document.getElementsByTagName('span')[0].style.fontFamily = 'Arial'; //whatever font you want

  }

}

</script>

You just copy it to the question field somewhere.

And instead if {{Kanji}} in the same question field place this:

Code:

<a onmouseover="toggleFont();" onmouseout="toggleFont();">{{Kanji}}</a>

That's it!

Oh, and if Anki was open during the font installation you should probably restart it.

kanji stroke order font script for anki - AdachiFan - 2011-03-29

Does anyone know how to get this to work? I like the concept but can't seem to make it work properly. Kanji text appears to be hardwired to whatever font is set in the 'Fields' tab of the card layout.

kanji stroke order font script for anki - jbudding - 2011-03-30

I copied the script exactly into the card layout tab above the line for {{Kanji}}, changed the arial to ms mincho and then pasted the mouseover script over the {{Kanji}} and it works like a charm! I wanted something like this for a while and was thing of pasting in the strokeorder url for each kanji from the wwwjdic but this is much cooler (and way easier!) and doesn't need a web connection. Thanks so much Irwin1138!

Here is my exact card layout for the Question side:

<script language="JavaScript">
function toggleFont()
{
var _font = document.getElementsByTagName('span')[0].style.fontFamily;
if(_font != 'KanjiStrokeOrders') {
document.getElementsByTagName('span')[0].style.fontFamily = 'KanjiStrokeOrders';
}
else {
document.getElementsByTagName('span')[0].style.fontFamily = 'MS MINCHO'; //whatever font you want
}
}
</script>
<a onmouseover="toggleFont();" onmouseout="toggleFont();">{{Kanji}}</a>
画数: {{Stroke count}}, Nr: {{Heisig number}}

kanji stroke order font script for anki - Shadeless - 2011-03-30

Thanks Irwin1138 & jbudding, I finally got it to work.. it's awesome Big Grin

Is there a way for font to change size on hover though?

kanji stroke order font script for anki - loonytik - 2011-03-30

I have the same problem as AdachiFan the Kanji seems to be hardwired and it doesnt change. Its font is Arial. But it just won't change. However the keyword does change from font haha. I use the premade rtk 1+3 deck downloadable from the sahred deck section..

kanji stroke order font script for anki - amelie - 2011-03-30

Hello!
Jbudding, can you post a image of this script in anki please?

I'm trying to get a working stroke order font in a deck but can't do it. (see the post "Super Heisig anki deck")

kanji stroke order font script for anki - van_fanel - 2011-03-30

I would like to add this feature to the answercard. I have no experience in html-programming. So, how do i get this done?

Gruß Van

kanji stroke order font script for anki - Eadwyn - 2011-03-30

EDIT: Forgot to thank Irwin1138!

loonytik Wrote:I have the same problem as AdachiFan the Kanji seems to be hardwired and it doesnt change. Its font is Arial. But it just won't change. However the keyword does change from font haha. I use the premade rtk 1+3 deck downloadable from the sahred deck section..

NOTE: This is for the pre-made RTK 1+3 deck:

It's because in the script it is changing the 1st span tag, which in your case is the keyword. I modified it slightly to modify the tag with the name attribute of "kanji" to prevent the location of the tags from mattering. Try using this for the Question field:

<span style="font-family: Arial; font-size: 20px; color: #000000; white-space: pre-wrap;"><a href="http://kanji.koohii.com/study/?framenum={{text:Heisig number}}">{{{Keyword}}}</a</br></br>{{{Story}}}</span>

And this for the answer field:

<script language="JavaScript">
function toggleFont()
{
var _font = document.getElementsByName('kanji')[0].style.fontFamily;
if(_font != 'KanjiStrokeOrders') {
document.getElementsByName('kanji')[0].style.fontFamily = 'KanjiStrokeOrders';
}
else {
document.getElementsByName('kanji')[0].style.fontFamily = 'MS Mincho';
}
}
</script>

<div align="center" name="kanji" style="font-family:MS Mincho; font-size:150px;"><a onmouseover="toggleFont();" onmouseout="toggleFont();">{{{Kanji}}}</a></div>
<div align="right">画数: {{Stroke count}}, Nr: {{Heisig number}}</div>

EDIT#2: The {{Kanji}} needs to be changed to {{{Kanji}}}. If it isn't changed to include the 3rd set of squiggly brackets, the font will not change.

kanji stroke order font script for anki - Eadwyn - 2011-03-30

After seeing the font changing script, I came up with the idea to have the story text hidden by default unless the mouse is hovering over the keyword.

For those with the pre-made RTK 1+3 deck, put this in the Question field (If not using this deck, then modify your deck by looking at this example):

<script type="text/javascript">
function showStory()
{
var _storyHidden = document.getElementsByName('story')[0].style.visibility;
if (_storyHidden == 'hidden') {
document.getElementsByName('story')[0].style.visibility = 'visible';
} else {
document.getElementsByName('story')[0].style.visibility = 'hidden';
}
}
</script>

<span style="font-family: Arial; font-size: 20px; color: #000000; white-space: pre-wrap;">
<a href="http://kanji.koohii.com/study/?framenum={{text:Heisig number}}" onmouseover="showStory();" onmouseout="showStory();">{{{Keyword}}}</a>
</span>
<br/>
<br/>
<div name="story" style="font-family: Arial; font-size: 20px; color: #000000; white-space: pre-wrap;visibility:hidden;">{{{Story}}}</div>

kanji stroke order font script for anki - loonytik - 2011-03-31

Thanks allot Eadwyn Big Grin

! works perfectly now Smile

kanji stroke order font script for anki - AdachiFan - 2011-03-31

Eadwyn, you're a legend. Great stuff. Elegant solution because now it doesn't matter where the kanji is displayed. Cheers to Irwin 1138, of course, for originally posting the script of course though. Much appreciated. Got my decks pretty much perfect now.

Is it possible to get the kanji number/stroke in a static position though? It's ever so slightly jarring having them move when you mouseover and the stroke order is displayed. I see that the stroke order font takes up more space but if the other fields were in an absolute position and didn't overlap, it shouldn't matter right?

kanji stroke order font script for anki - Eadwyn - 2011-03-31

AdachiFan Wrote:Eadwyn, you're a legend. Great stuff. Elegant solution because now it doesn't matter where the kanji is displayed. Cheers to Irwin 1138, of course, for originally posting the script of course though. Much appreciated. Got my decks pretty much perfect now.

Is it possible to get the kanji number/stroke in a static position though? It's ever so slightly jarring having them move when you mouseover and the stroke order is displayed. I see that the stroke order font takes up more space but if the other fields were in an absolute position and didn't overlap, it shouldn't matter right?

Here's a quick solution I came up with:

<script language="JavaScript">
function toggleFont()
{
var _font = document.getElementsByName('kanji')[0].style.fontFamily;
if(_font != 'KanjiStrokeOrders') {
document.getElementsByName('kanji')[0].style.fontFamily = 'KanjiStrokeOrders';
document.getElementsByName('kanji')[0].style.fontSize = '112px';
}
else {
document.getElementsByName('kanji')[0].style.fontFamily = 'MS Mincho';
document.getElementsByName('kanji')[0].style.fontSize = '150px';
}
}
</script>

<div align="center" name="kanji" style="font-family:MS Mincho; font-size:150px;"><a onmouseover="toggleFont();" onmouseout="toggleFont();">{{{Kanji}}}</a></div>
<div align="right">画数: {{Stroke count}}, Nr: {{Heisig number}}</div>

This will work if using the MS Mincho font for the Kanji.

kanji stroke order font script for anki - AdachiFan - 2011-04-01

Good man Smile

. Thanks a lot. I should really learn javascript etc. at some point. After Japanese though Tongue

kanji stroke order font script for anki - Irwin1138 - 2011-05-27

Wow, someone did find this script helpful! I'm glad I found time to post it here =)

kanji stroke order font script for anki - truando - 2012-03-09

It's fantastic, Irwin1138, thank you so much! Also Eadwin!!

kanji stroke order font script for anki - Irwin1138 - 2012-08-08

For anki2 I had to modify the whole thing to make it work, with css and stuff. Here is the current setup for my RTK1-3 cards:

Front template:

<a href="http://kanji.koohii.com/study/?framenum={{text:Heisig number}}">{{Heisig number}}</a>
<div class=kanji>{{Kanji}}</div>
<div>{{Japanese Keyword}}</div>
<a href="#" onclick="document.getElementById('story').style.display='block';return false;">
Show Story
</a>

<div id="story">
{{Story}}<br />
-------------------<br />
{{Story 2}}
</div>

Styling:

.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}

.card1 {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}

div.kanji {
font-size: 150px;
}

div.keyword {
margin-top: 20px;
}

#left {
float: left;
}

#clear {
clear: both;
}

div.kanji:hover {
font-family: KanjiStrokeOrders;
font-size: 130px;
}

div#story {
display: none;
}

Back template:

<a href="http://kanji.koohii.com/study/?framenum={{text:Heisig number}}">{{Heisig number}}</a><br />
<div id=left class=kanji>{{Kanji}}</div>
<div class=keyword>{{Keyword}}</div>
<div>{{Japanese Keyword}}</div>
<div>{{Keyword Hiragana}}</div>
<div>{{Sentence}}</div>
<div id=clear></div>
<a href="#" onclick="document.getElementById('story').style.display='block';return false;">
Show Story
</a>

<div id="story">
{{Story}}<br />
-------------------<br />
{{Story 2}}
</div>

Here is how it all looks:
[Image: 24enmvt.png]

Note: the little kanji under the big one is for the cases where the japanese keyword is a compound or includes hiragana. Makes a good hint.
Oh and if you hover the kanji it still shows stroke order =)

A little explanation. I have added japanese keywords with example sentences to my deck (somewhere on the forum was a topic about jrtk, I took the data from there). Since you most probably don't have these, you should just remove the fields in the html with japanese keywords and such.

Also, my deck includes RTK1, RTK3 and the RTK1 supplement. For about 2000 there is a japanese keyword with reading and an example sentence. For each kanji there are 2 stories. If anyone is interested I can export it so others can use it.