HTML ruby Annotation Example

By Xah Lee. Date: . Last updated: .

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

html ruby annotation 60465
Example of Ruby annotation rendered. (with custom CSS for font size and coloring)

かんじ , hàn, ㄏㄢˋㄗˋ

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, ㄏㄢˋㄗˋ

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.

Example:

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

what your browser shows: xyz (abc)

Browser Support

As of , browsers that support ruby annotation are: {Google Chrome, Firefox, Safari, IE9}.

As of , 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.

Like what you read? Buy JavaScript in Depth.