HTML “ruby” Annotation Example

, , …,
Buy Xah JavaScript Tutorial.

HTML5 has {ruby, rt, rp} tags. These are used for pronunciation markup for mostly Japanese & Chinese.

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

Here's what the tag means:

English Example

Here's what your browser shows:

lingerie ˌlɑːndʒ.əˈreɪ

Here's the HTML code:

<ruby class="ruby44235">lingerie <rt>ˌlɑːndʒ.əˈreɪ</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 , the browsers that support ruby are: {Google Chrome, Firefox, Safari, IE9}.

As of , the browsers that support ruby 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