Different Font size for Chinese characters

Hi, I’ve long been limping along using Anki to learn Chinese, but have never been successful in making the Chinese characters larger in size in comparison to the English. I periodically have a long search session and never find anything that works, so finally am biting the bullet and asking for help - I can feel it in my bones that the answer is going to be simple, but I’ll be damned if I can find it. Thanks in advance for your time anyone kind enough to put me out of my misery and reply.

I make my own sets of flashcards using tables on word, copying and pasting to excel etc. and like to keep things simple with just two fields of front and back, Chinese characters/English + Pinyin.

I have always used the template below that is the one template I have been able to find on google that straightforwardly proffers itself as ‘Anki styling for Chinese cards’ using only two fields and no audio etc.

As for my attempts with that template in the styling for both cards field, changing the amount in the third line …

font-size: 20px;

… changes the font size of everything as it should.

But changing the font size of within the field …

.chinese { font-size: 50px;}

… has no effect

Any ideas?

THE TEMPLATE

.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.card { word-wrap: break-word; }
.win .chinese { font-family: “MS Mincho”, “MS 明朝”; }
.mac .chinese { font-family: “STFangsong”}
.linux .chinese { font-family: “Kochi Mincho”, “東風明朝”; }
.mobile .chinese {font-family: “PingFangSC-Regular”;}

.chinese { font-size: 50px;}
.comment {font-size: 15px;}
.tags {color:gray;text-align:right;font-size:10pt;}
.note {color:gray;font-size:12pt;margin-top:20pt;}
.hint {font-size:15pt;}
//.answer { background-color:bisque; border:dotted;border-width:1px}

.tone1 {color: red;}
.tone2 {color: orange;}
.tone3 {color: green;}
.tone4 {color: blue;}
.tone5 {color: gray;}

.mac .btm {
position: absolute;
bottom: 0;
color:blue
}

1 Like

Hi, welcome to the forum! It’s not really easy to understand what’s going on from reading only your style definitions. Can you also share the front and back templates of your card?

Are you applying the style to the respective text fields, using something like <div class=chinese>{{Chinese}}</div>?

2 Likes

By the way, I don’t own these fonts, but from what I can read online the fonts MS Mincho and Kochi Mincho only support Japanese. This will mean due to Han unification some characters will display Japanese variants. I would very much recommend using a proper Chinese font if you are learning Chinese!

1 Like

Lilalas, thanks so much for your quik reply!

Ah, I’ve never made any changes to the other fields beyond what seems to be some default code(?).
(As changing the overall font size was having an effect, I’d discounted the front and back fields being involved in the problem).
Currently the Front Template is:

{{Back}}

And the back template:

{{FrontSide}}


{{Back}}

I’ve tried copying and pasting what you;ve suggested into both fields, and currently this causes the appearance, in bigger font, of:
{unknown field Chinese}
?

Re. the actual font- well spotted. Sorry, I had changed that on the template to ‘Kaiti’.

Okay, that’s what I suspected. You should replace {{Chinese}} by the name of the text field, in your case write <div class=chinese>{{Front}}</div> or <div class=chinese>{{Back}}</div>, whichever contains the Chinese. This means the entire content of that text field will apply the styling you defined with .chinese {…}.

More info about styling is in the manual, here is the relevant section:

https://docs.ankiweb.net/#/templates/styling?id=field-styling

1 Like

Ah, thank you very much. This is definitely an excellent solution that will work for a lot of my decks.
I’d been taking the approach that there must would be a straightforward code that could trigger a corresponding fontsize whenever Chinese font appears, in whatever part of the card.
Some times I switch around which side I have pinyin so it appears on the same side as the Chinese characters, so the pinyin will be appearing in jumbo too, but I can happily live with that.
Thank you so very much for your help with this, and for replying so quickly. Really appreciate it!

I should add, thanks also to your guidance, I’ve now worked out what I need to do with future decks (i.e. add a third discrete pinyin field rather than ‘bundling’ the pinyin).

Oh, yes, if you are willing to invest more time into customizing your deck, you should definitely do that! The more you separate information into different fields, the easier it will be to apply custom styling.

You could also start doing this right now; a deck can contain notes of multiple different types. (Although it could be distracting the cards you are reviewing look very different to one another.)

Sounds interesting - which ones would that be, and how can I ensure that they get displayed, please?