Jump to content
Chinese-Forums
  • Sign Up

Hanzi Grids in Anki


HerrPetersen

Recommended Posts

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:

iqXHBma.jpg?1

 

 

 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}}
  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and select your username and password later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Click here to reply. Select text to quote.

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...