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.

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

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

Last edited by Shadeless (2011 March 30, 1:10 pm)

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

Last edited by amelie (2011 March 30, 2:41 pm)

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.

Last edited by Eadwyn (2011 March 30, 11:21 pm)

Thanks allot Eadwyn ! works perfectly now

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.

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

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.

Last edited by Irwin1138 (2012 August 08, 1:05 am)