HTML “ruby” Annotation Example

Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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.

Here's the HTML code:

<ruby>lingerie<rt>ˌlɑːndʒ.əˈreɪ</rt></ruby>

Here's what your browser shows: lingerieˌlɑːndʒ.əˈreɪ

The coloring and font size are done by CSS.

If your browser supports ruby annotation, the pronunciation should be rendered in smaller font above ruby text.

Chinese Example

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

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

漢かん字じ　

The following are 2 more examples. The first one uses the pinyin pronunciation system, the second uses zhuyin. 〔➤ Linguistics: Zhuyin (ㄅㄆㄇㄈ), 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 class="ruby44235">
xyz <rp>(</rp><rt>abc</rt><rp>)</rp>
</ruby>

what your browser shows: xyz (abc)

Browser Support

As of today (2013-08-16), the browsers that support ruby are: {Google Chrome, Safari, IE9}. Firefox and Opera are fails.

Reference

http://www.w3.org/TR/html5/text-level-semantics.html#the-ruby-element

Back to HTML5 Tags Complete List.