Perm url with updates: http://xahlee.org/js/html5_ruby_tag.html

HTML5 “ruby” Tag

HTML5 has {ruby, rt, rp} tags. These are used for pronunciation markup for Asian languages (mostly Japanese, sometimes Chinese). This page show examples of how to use it.

Following is HTML code for ruby annotation of the chinese characters 漢字, with the japanese pronunciation {かん,じ}.

<ruby>漢<rt>かん</rt>字<rt>じ　</rt></ruby>

Here's what your browser shows: 漢かん字じ　

If your browser supports ruby annotation, the pronunciation should be rendered in small font above the chinese characters.

The following are 2 more examples. The first one uses the pinyin pronunciation system, the second uses zhuyin. (See: Zhuyin (bopomofo), Pinyin, IPA, Comparison.)

<ruby>汉<rt>hàn</rt>字<rt>zì </rt></ruby>
<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ　</rt></ruby>

what your browser shows: 汉hàn字zì , 漢ㄏㄢˋ字ㄗˋ　

The “rp” Tag

The “rp” tag is used to add parenthesis around the pronunciation symbols for browsers that does not support ruby.

• If the browser does support ruby, then “rp” and its content is ignored.
• If the browser does NOT understand any of the ruby tags, then normally it'll just ignore the tag but display the tag's text content, which results in showing pronunciation inside parenthesis.

Example:

<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

what your browser shows: 漢 (かん) 字 (じ)

Browser Support

As of today (2011-07), the browsers that support ruby are: {Google Chrome (v12), Safari (v5.0.5), IE9}. Firefox 5 and Opera 11.50 are fails.

• Reference: the ruby element @ Source dev.w3.org

Back to HTML5 Tags.