HTML ruby Annotation Example

HTML5 has {ruby, rt, rp} tags. These are used for pronunciation markup. Mostly used in Japanese and Chinese.

• ruby → Markup container. For above-line pronunciation annotation.
• rt → used inside ruby, for markup pronunciation
• rp → used inside ruby, for browsers that doesn't support the ruby tag.

漢かん字じ　, 汉hàn字zì , 漢ㄏㄢˋ字ㄗˋ

English Example

Here's what your browser shows:

passé /paˈsā/

Here's the HTML code:

<ruby class="ruby44235">passé <rt>/paˈsā/</rt></ruby>

Here's the CSS code:

ruby.ruby44235 {color:green; font-size:xx-large}
ruby.ruby44235 rt {color:red}

Japanese Example

Here's what your browser shows:

漢かん字じ

HTML code:

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

Chinese Example

Here's what your browser shows:

汉hàn字zì, 漢ㄏㄢˋ字ㄗˋ

HTML code:

<p><ruby class="ruby44235">汉<rt>hàn</rt>字<rt>zì</rt></ruby>,
<ruby class="ruby44235">漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby></p>

〔➤see Chinese Pinyin 拼音, Zhuyin 注音, IPA Comparison〕

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 2015-06-12, browsers that support ruby annotation are: {Google Chrome, Firefox, Safari, IE9}.

As of 2013-08-16, browsers that support ruby annotation are: {Google Chrome, Safari, IE9}.

Reference

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

Back to HTML5 Tags Complete List.