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.

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.

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}}

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

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

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..

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")

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

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.

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>

Thanks allot Eadwyn ! works perfectly now

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?

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.

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

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

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

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:


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.