More on Furigana

Monday January 30, 2006

Although my script for parsing ruby text tags is still a work in progress, a few people have expressed interest in using it—which is cool. Let me briefly explain how it works and offer a link for downloading it.

How it works

For starters, you just mark up your furigana using normal ruby text tags. The entire construction should be contained in a RUBY element, using a nested RB tag for the main text (“ruby base”) and an RT tag for the ruby text.

<ruby>
<rb>京都</rb>
<rt>きょうと</rt>
</ruby>

So far so good, but most browsers will just ignore the tags. So how do we get the ruby text to sit atop the base text?

The CSS approach

I did try using pure CSS to position the ruby text. This actually works if you style the ruby element with display: inline-block and do some custom positioning of the rt element. Unfortunately, though, the only method I could come up with had Gecko browsers (Camino and Firefox) shifting the ruby text much too high compared to Safari, which I believe was interpreting the styles correctly.

The Javascript approach

So I turned to Javascript. The main function in my library finds all the ruby elements in the page, hides the existing ruby text elements, and creates duplicates in the root div element. It then calculates the position of each ruby element on the page and positions each ruby text element (using position: absolute) above the corresponding base element.

The library has another function for refreshing the position of all ruby text elements. This function is called every second to ensure that ruby text remains in the right spot if the user changes the browser’s font size. That function is also called if the user resizes the browser window.

Here’s what the above code looks like in action:

京都
きょうと

Using the ruby text library

The most important file is rubytext1.js, which must be linked to in the HTML document’s head. To save time and trouble, my library makes several calls to the Prototype Javascript Framework, so you’ll need to include the Prototype javascript files as well.

The library is activated by calling positionRuby() in the body tag:

<body onLoad="positionRuby();">

So that’s all you really need: the script links and the function call.

So far, the library is not sophisticated enough to read any of the ruby-specific CSS selectors. Maybe I’ll add those at a later date.

You will need to style the ruby elements yourself, rt in particular. I find that setting its font size to 55% seems to work pretty well in most situations. Making it bold helps legibility, but Firefox does a really poor job of rendering Japanese text in bold, at least on my computer.

You’ll also want to make sure your text’s line-height is around 2em, so that there’s room for the ruby text.

Here’s my original ruby text test page so you can see how it’s put together. You can also download a zip file with the ruby text library.

Article Tags:

  1. yeah! i gave it a go! it’s cool.

    THANKS for sharing this.

    the CSS is a bit small on the Japanese! Japanese! site, when viewed in Firefox. But then it looks good in Safari. So not sure how to manage then CSS for it.

    It’s also a bit too small in Firefox on your site too.

    And ideas?

    — heather    Jan 31, 12:45 pm    #

  2. I’m still trying to figure that out, Heather. This is still a very rough solution for generating furigana. In the meantime, I’ve just been trying to find an acceptable in-between font size.

    — Paul Davidson    Jan 31, 09:57 pm    #

  3. it was because my base body font was already 62%, so i fixed it to be 90% for ruby in the CSS!

    — heather    Feb 1, 02:52 am    #

commenting closed for this article

Studying for the JLPT Level 2 Japanese: What Are Your Weaknesses?