Hanzi Grids in Anki

November 27, 2014 at 09:53 AM

Hi there - here is just a little result from playing around:

As many of you probably do I review Hanzi using ankidroid on my mobile phone. I also use the blackboard feature. What always bothered me was the lack of a "Hanzi"-box so it was hard to properly position and scale the hanzi. So I copy-pasted some code from the internet and ended up with the following:

This is an image from the desktop version (front + back-side of the card), which translates nicely to the ankidroid version.

I have no css experience whatsoever so the code is most likely very bad. Free feel to improve it . The image used for the hanzibox is attached. The font I used can be found on the internet.

I have mixed feelings about posting the code (because of above reasons) but still here it is.

Front Side:

<html>
<head>
<style>
div.background {
width: 220px;
height: 220px;
background: url(_HanziBox.jpg);
border: 2px solid black;
}

div.transbox {
width: 220px;
height: 220px;
margin: 0px 0px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 0px 0px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p><div class=hanziStyle></div></p>
</div>
</div>

</body>
</html>

<a href="http://hanzi.koohii.com/study/?framenum={{text:Heisig number}}">{{Keyword}}</a>
<br>
{{Pinyin}}

Styling Section:

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

.card1 { background-color: #ffffff; }

.hanziStyle{
font-family: hanziFont;
font-size: 200px;
text-align: center;
color: blue;
}
@font-face { font-family: hanziFont; src: url('_simkai.ttf'); }

Backside

<html>
<head>
<style>
div.background {
width: 220px;
height: 220px;
background-size: 100%;
background: url(_HanziBox.jpg);
border: 2px solid black;
}

div.transbox {
width: 220px;
height: 220px;
margin: 0px 0px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=70); /* For IE8 and earlier */
}

div.transbox p {
margin: 0px 0px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p><div class=hanziStyle>{{Hanzi}}</div></p>
</div>
</div>

</body>
</html>

<! <hr id=answer>

<!<div class=hanziStyle> <!{{Hanzi}} </div>
<br>画数: {{Stroke count}}, Nr: {{Heisig number}}
<br>
{{Story}}
<a href="http://hanzi.koohii.com/study/?framenum={{text:Heisig number}}">
<br>
{{Keyword}}</a>
<br>
{{Pinyin}}

Sign In

Hanzi Grids in Anki

Recommended Posts

HerrPetersen

Join the conversation