HTML5 “ruby” Tag

Perm url with updates: http://xahlee.org/js/html5_ruby_tag.html

HTML5 “ruby” Tag

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.

Following is HTML code for ruby annotation of the chinese characters 漢字, with the japanese pronunciation {かん,じ}.

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

Here's what your browser shows: かんじ 

If your browser supports ruby annotation, the pronunciation should be rendered in small font above the chinese characters.

The following are 2 more examples. The first one uses the pinyin pronunciation system, the second uses zhuyin. (See: Zhuyin (bopomofo), Pinyin, IPA, Comparison.)

<ruby>汉<rt>hàn</rt>字<rt>zì </rt></ruby>
<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ </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.

  • 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>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

what your browser shows: (かん)()

Browser Support

As of today (2011-07), the browsers that support ruby are: {Google Chrome (v12), Safari (v5.0.5), IE9}. Firefox 5 and Opera 11.50 are fails.

Back to HTML5 Tags.

Popular posts from this blog

Browser User Agent Strings 2012

11 Years of Writing About Emacs

does md5 creates more randomness?