For those of you unfamiliar with the ruby tag, it is an html tag that adds tiny readings over kanji. 「ルビ」 traditionally is used in print for archaic kanji or when the author wants to indicate a non-standard reading for the kanji. However, on the net, ruby tags are being abused everywhere I see them. Here’s a simple benchmark (with a neat acronym to make it “official”) for determining whether you’re abusing the ruby tag.
Ruby Abuse Benchmark (RAB)
1. Do you use ruby tags for every kanji?
2. Do you use ruby tags for any kanji that most Japanese people can read?
3. Do you use ruby tags?
If you answered “Yes” to any of the questions above, you are abusing the ruby tag.
This abuse happens most often on sites that are intended for people learning Japanese. For example, this site about the JLPT or Japanese language blogs like the one you’re reading now. I don’t use ruby tags though. Even sites for kids stay away from ruby and just use Hiragana instead. Here’s why you should stay away from them too.
The Technical Reason
Ruby is only included in the XHTML 1.1 specification, which has been around forever and still hasn’t gained much traction. The HTML 4.01 and XHTML 1.0 Transitional DTDs are still being used in the majority of website that care about standards. This means that if you want to use a schema that the majority of the web is using, <ruby> won’t validate.
Plus, the markup is terribly hard to read and write. Take a look at these markup examples. Imagine doing that for every kanji. Your Japanese text will be indecipherable and an incredible pain to edit.
The Practical Reason
Because XHTML 1.1 hasn’t gained much traction, a majority of browsers don’t support ruby. The only one I’m aware of that does is IE and in today’s world where up to 30% of your visitors might not be using IE, IE-only is not practical.
People without Ruby support will see this.
Terrible, just terrible. It’s totally unreadable. Plus, even if you DID have Ruby support, the text is far too small. It’s a lose-lose situation. The correct use of ruby is to show the readings of a few archaic words that the author assumes will not readable by his audience or when he wants to expand on the word. It is NOT intended to be used for every kanji. The print is too small for people who need them and distracting for the people who don’t need them. Also, it can become a crutch allowing people to never actually read and learn the kanji.
So, even if you can install something such as an extension to make ruby tags work, it’s just not a good idea.
1. CSS mouse-over popups: It’s one simple span tag and it works in all major browsers. It’s also more versatile because you can add more information such as English definitions, etc.
Html: <span title=”たべる – to eat” class=”popup”>食べる</span>
I suggest adding a visual highlight so that the reader can easily see which part of the text applies for the popup or whether there is a popup at all (not supported by some older browsers). You can easily do this by adding some CSS like the following to your stylesheet.
Plus, you can easily see the readings for only the words you need, removing the distracting ruby text and preventing the furigana from becoming a crutch.
Here’s a recent convert and look at all the positive comments he’s gotten.
2. Make a list of the vocabulary at the beginning or end of the page so that the reader has something to refer to.
3. Suggest additional tools such as WWWJDIC, 理解.com, moji, and rikaichan so that people can learn to teach themselves. (You know, the whole teach a man to fish thing.)
I think the first method is good for static resources like my guide to Japanese grammar but when you don’t have the time to add readings and definitions manually all the time (like this blog), you can’t beat the third method. Plus, it helps your readers read any online Japanese text instead of just your own. In the end, whatever method you use, it certainly beats the hell out of writing this for every word that uses kanji.
Ah!!! My eyes!!