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.
Alternatives
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>
Appears as: 食べる
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.
span.popup:hover {
text-decoration:none;
color: rgb(159,20,26);
}
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.)
Conclusion
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.
<ruby>日本語<rp>(</rp><rt>にほんご</rt><rp>)</rp></ruby>
Ah!!! My eyes!!
You can make Ruby work for FireFox et al. using the proper CSS:
/* Ruby text*/
ruby
{display:inline-table;
text-align:center;
border-collapse:collapse;
/* border collapse mechanism
will be used to adjust vertical alignment */
vertical-align:middle;
/* if ruby text contains text only
and there are two ruby annotations
(one placed above the base and one below)
then vertical centering roughly aligns baseline of
base with baseline of parent */
border-bottom:solid 0.75em transparent;
/* o.75em is height of ruby text (0.5×1.2em = 0.6em)
plus space between baseline and text-bottom (about 0.15em)
this extra border is counter-weight used
to restore vertical centering broken
by presence of ruby text
(in case if there is only one ruby annotation,
if there are two annotations
then counter-weight is no longer
necessary and can be annihilated
using border collapse mechanism) */}
ruby > rt, rtc
{display:table-header-group;}
/* used to move first ruby
container above the base */
ruby > rb, rbc, ruby > rt + rt, rtc + rtc
{display:table-row;}
/* base and second ruby
are formatted as table-rows */
ruby > rt + rt, rtc + rtc
{border-bottom:hidden;}
/* if there are two annotations then extra
border is no longer necessary
and can be annihilated
using border collapse mechanism */
rb, rbc, rt, rtc
{white-space:nowrap;}
/* prohibits line breaks inside ruby text */
rtc > rt, rbc > rb
{display:table-cell;}
/* used to distribute annotations
in table like manner */
rtc > rt[rbspan]
{column-span:attr(rbspan);}
/* ruby text may span several cells */
ruby > rt, rtc
{font-size:0.5em;
line-height:1.2em;}
/* font-size of ruby text is reduced */
rp
{display:none;}
/* fallback markup is no longer necessary */
Wikis and forums with macro/template support can make this even less painful. For example, JGJG Wiki has a template that looks like this:
{{furi|漢字|かんじ|chinese character}}
and produces:
漢字
rikaichan makes any sort of ruby obsolete, anyway 🙂
Even if ruby tags worked in all browsers perfectly, it won’t fix the fact that the markup itself is terrible or the fact that furigana should only be used sparingly.
Now it the first time i see the connection between the Ruby programming language (created by a japanese) and this… I thought it was named because of the jewel, but maybe it’s some kind of pun? 🙂
the ruby tag is perfect example of creating xml hell! well pointed out!
@David: as improbable as it may seem, there is no connection between Ruby as in furigana and Ruby the programming language.
Ruby characters, the subject of this post, are named after a small British 5pt font used for side notes and similar text annotations.
Ruby the programming language is named so as an allusion to Perl, a language that influenced Ruby’s design.
Ruby tags also prevents rikaichan from highlighting entire words, as it stops on the ruby tags. Very annoying.
I don’t like the pop up solution either. I already have rikaichan doing pop ups over words. In my opinion webpages should be flat and give the user the power to popup whatever they want. They shouldn’t force popups upon the user.
I think just have it written above using some css hackery and perhaps increase size on mouse over is the best solution.
Have you seen this?
http://kids.knowledgewing.com/verup/V2_verup1.html
I think this is the correct link. someone showed me a Japanese children’s web browser called Naviiy which will modify the page to display furigana above the kanji. So there isn’t any need to embed ruby into the html. You can also set which year you are at school so it will not add the furigana to the kanji you should already know.