[Japanese Furigana] How to properly set Styling and Spacing?

Anki Card Design
1

Hi.

I’ve been reading halfway through the manual and so far I haven’t found instructions specific about this so I’m asking here.

As you can see on the screenshot the styling of furigana さくぶん is totally off.

Each mora “syllable” is very spaced out from each other, and too large that cannot match with the spacing of their respective Kanji below.

I want to have さくon top of 作, and ぶん on top of 文.

I’m not knowledgeable of HTML and CSS but if I can learn just enough to be able to get a handle of this without installing addons it’d be truly awesome.

How can I achieve this?

image
image660×103 1.35 KB

2

Can you share the code for your template and the source code for the contents of the field? The default note type does not reproduce that appearance:
image

4

Hi

Do you mean this:

Front Template

{{furigana:Front}}

Back Template

{{FrontSide}}

<hr id=answer>

{{Back}}

Styling

.card {
    font-family: arial;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    color: black;
    background-color: white;
}
5

Yes, but also what exactly is entered in your field. You can display it by pressing the <> button at the top right corner of the field in the editor.

6

Ow, this?

作文 [さくぶん]
7

If that’s what is shown for you in the bottom part, then yes:

image
image180×117 1.68 KB

The important thing is to make sure there isn’t any hidden html code there. Although, there is a space character between 作文 and the opening square bracket in your posted block. Is it the case for the original field as well, or was it something accidentally added during pasting?

Also, what is the version of the app you are using? (it’s displayed by opening Help → About Anki)

8

Since you mentioned about the space before the bracket, I erased it now and it solved the issue.

作文[さくぶん]

image
image547×100 1.8 KB

So Anki has everything already sorted out regarding styling Furigana then? No extra complicated steps required.

9

Spacing matters – Field Replacements - Anki Manual .