Furigana Spacing

Anki Card Design
1

Hi! I’m trying to get the vertical and horizontal spacing of my Furigana to work as expected but so far cannot.

IMG_0130
IMG_0130517×382 18.3 KB

(Just a couple nonsensical adjacent kanji)

As you can see though the kanji are small and the Furigana can’t space out, or won’t. I have tried adding a space in the field, I really just can’t get it to work!

Front: 口[くち] 私[わたし]

Code bits:

{{furigana:Front}}

.card {
font-family: Arial;
font-size: 30px;
font-weight: bold;
line-height: 1;
text-align: center;
color: white;
background-color: black;
}

(Line height doesn’t affect the vertical spacing either)

2

What you’re showing there looks correct based on the text string you’re using – 2 kana are aligned above the first kanji, 3 kana above the second kanji. What are you trying to have happen differently?

I’m also not following what problem you’re having with vertical spacing (if that’s separate).

3

In examples of cards I’ve seen in the help pages the Fukuyama is properly separated. I also would like to be able to adjust the height of the Fukuyama from the kanji, so the vertical margin?

Also colour breaks everything? It adds extra tags that the Furigana ruby html just doesn’t parse right I guess.

Easier to show than to describe I guess. Mockup in Freeform:

IMG_4173
IMG_41731069×885 39.7 KB

Edit:

I returned to an earlier attempt using a div class and the rt tag, I got closer but maybe this compared with my mockup shows my issue clear enough for you?

IMG_0133
IMG_01331640×672 45.2 KB

Code bits:

{{furigana:Front}}
———— .card { font-family: Arial; font-size: 30px; font-weight: bold; line-height: 1; text-align: center; color: white; background-color: black; } .topStyle { font-size: 100px; } rt { font-size: 24px; }

Oh bloody hell it won’t format here properly.

IMG_0134
IMG_01341089×1070 91 KB

4

I think that you need to make sure that your ruby font-size is small enough and that your base font-size is large enough such that the widest group of ruby characters fits above the base character. And, set the alignment to be centered.

For the example you provided, try something like:

ruby {
font-size: 50px;
ruby-align: center;
}

rt {
font-size: 15px;
}

With the Front field set to…
口[くち] 私[わたし] 口[くち] 私[わたし] 私[わたし]
… I see this in my preview:

Screenshot 2026-10-01 at 4.41.16 PM

5

That looks like the relative font size between the kanji and the kana is different. The only reason the kana looks “properly separated” is that each set of kana isn’t as “wide” as its base kanji.

Even though built-in Ruby Characters support hides the HTML you’d usually need, it still relies on that HTML, so you can still use CSS to style it. [It might help to understand the basics of how <ruby> tagging works.]

For instance, to make the ruby text show as only 30% of the base font size, you could add this section to your Styling tab. Adjust as needed, but remember that it’s going to apply to all of your ruby text – including short furigana over long kanji, and long furigana over short kanji.

rt {
font-size: .3em;
}

More resources on styling <ruby> –

It all depends on where you’re applying the color. That’s also controlled with HTML behind the scenes, so if you try to split something up, you need to make sure your color formatting is contained entirely within that or wraps around it completely. In AnkiMobile, click the </> in the editing bar to open up the HTML view.

6

I appreciate the wisdom, but I’m not here to learn web coding, just get my template acceptable and not confusing as heck so I can… learn Japanese.

IMG_4174
IMG_41741179×1562 185 KB

You have the result I’m looking for but could you explain how to integrate this code into what I have above? You seem to be setting the ruby text size twice and I don’t know how that works along with the regular card text size.

For clarification, I’m colouring using the paint brush. That breaks wherever it injects the ruby code in the card so I can’t use colour really on the app.

(I can’t figure out how to quote a post here tapping and holding on text doesn’t let me copy it like it usually would.)

8

You need to put my CSS styling code into your card template, in the Styling section. It simply makes the bottom, larger characters 50px size and the top, smaller characters 15px size. I arbitrarily picked those values for the example. You might need to use other values, depending on the size of other text on your card. You might need to experiment to see what values will give you the look you want.

Regarding colors, I noticed that ruby text functionality breaks in Anki if you (or the GUI editor) inserts code between the base character and the ruby text. For example, with 私[わたし] , if you (or the GUI editor) inserts anything between the 私 and [ characters, then Anki doesn’t display the ruby text correctly.

So, this doesn’t work:
<span style="color: rgb(0, 255, 0)">私</span>[<span style="color: rgb(254, 144, 0);">わたし</span>]
But, this does:
<span style="color: rgb(0, 255, 0)">私[<span style="color: rgb(254, 144, 0);">わたし</span>]</span>

Unfortunately, the GUI editor is very basic. It likely will not be able to produce code that is formatted in a way that does not break ruby text functionality.

As suggested to you above, you’ll probably need to click on the “<>” icon in the upper right above the field to expose the HTML Editor and then manually craft/edit the HTML code to look the way you want to make colored ruby text work.

(Sorry if there isn’t a way to do what you want without some amount of web coding.)