HTML “ruby” Annotation Example

, , …,
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.

html ruby annotation
html ruby annotation

Here's the HTML code:


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>

what your browser shows:

hàn, ㄏㄢˋㄗˋ

The “rp” Tag

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


<ruby class="ruby44235">
xyz <rp>(</rp><rt>abc</rt><rp>)</rp>

what your browser shows: xyz (abc)

Browser Support

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


Back to HTML5 Tags Complete List.

blog comments powered by Disqus