Jump to content
Chinese-forums.com
Learn Chinese in China

HerrPetersen

Hanzi Grids in Anki

Recommended Posts

HerrPetersen

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

Share this post


Link to post
Share on other sites
Site Sponsors:
Pleco for iPhone / Android iPhone & Android Chinese dictionary: camera & hand- writing input, flashcards, audio.
Study Chinese in Kunming 1-1 classes, qualified teachers and unique teaching methods in the Spring City.
Learn Chinese Characters Learn 2289 Chinese Characters in 90 Days with a Unique Flash Card System.
Hacking Chinese Tips and strategies for how to learn Chinese more efficiently
Popup Chinese Translator Understand Chinese inside any Windows application, website or PDF.
Chinese Grammar Wiki All Chinese grammar, organised by level, all in one place.

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