Ruby furigana in pure css

I’m not entirely sure about the nature of the ruby tag within HTML, but I know that it is used by many Japanese sites for including furigana. If you stumbled upon this post then you are probably aware what furigana is (and can skip the rest of this paragraph). If not, well in Japanese many Chinese characters are used. Those characters are called kanji. The Japanese also have 2 phonetic alphabets, hiragana and katakana. The problem with kanji is that unless you know the character (and in some cases the whole word), you will have no idea how to pronounce it (many Japanese names are written using the same characters but pronounced differently, not to mention foreigners and Japanese kids who are just learning kanji will have trouble with more than just names). To help overcome this problem the Japanese use furigana in some of their written text. Furigana are small hiragana characters (though small katakana or kanji characters are also used occasionally) placed above a kanji (in horizontal text) or to its right (in vertical text). You can find more about furigana on wikipedia.

Anyway, to correctly display furigana enclosed in a ruby tag, you will need a plugin like HTML Ruby for Firefox. Without such plugin the furigana (enclosed between parentheses) will be placed inline behind the kanji.

Here is a sample of HTML containing some ruby furigana.

<ruby><rb>私</rb><rp>(</rp><rt>わたし</rt><rp>)</rp></ruby>はパンを<ruby><rb>買</rb><rp>(</rp><rt>か</rt><rp>)</rp></ruby>った。

Without a furigana plugin it will render as:

私(わたし)はパンを買(か)った。

If you’re using a browser on a desktop computer, you can just install a plugin for your browser and be done with it, but what if you need to display ruby furigana on a machine\browser that doesn’t have such plugin, or what if you are writing a PhoneGap application?

It turns out you can style ruby furigana to display correctly using css alone. The biggest obstacle in getting this to display correctly is reversing the order in which kanji and furigana are displayed. The plugins achieve this through use of translate (within the transform style). This method has some limitations, but there is another way to do this.

The trick is to use table-header-group display method on the furigana. This is “equivalent” to making an element behave like a thead tag, effectively making it display at the top of it’s container (in this case the ruby tag).

Obviously this css furigana isn’t perfect (there is no support of dot furigana), but should be good enough to use in most cases. The code for ruby css is below:

ruby
{
	display:inline-block;
	text-align:center;
	padding-top:0.2em;
	word-wrap:normal;
	vertical-align: bottom;
}

ruby rp
{
	display:none;
}

ruby rb, ruby rt
{
	display:block;
	text-align:center;
	vertical-align:bottom;
}

ruby rt
{
	display: table-header-group;
	font-size:0.5em;
	line-height:1.5em;
}

ruby rb
{
	display: table-row-group;
	vertical-align:bottom;

 

Update: Turns out “newer” versions (4 and up) of android have Ruby support in the native browser, making this trickery unnecessary. I think FireFox too has added support for Ruby recently.