HTML “ruby” Annotation Example

, , …,
Buy Xah JavaScript Tutorial.

HTML5 has {ruby, rt, rp} tags. These are used for pronunciation markup. Mostly used in Japanese & 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>

〔➤ Linguistics: Zhuyin (ㄅㄆㄇㄈ), Pinyin, 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.

blog comments powered by Disqus