HTML: Ruby Tag (character annotation)

HTML tags for ruby annotation

Ruby is pronunciation annotation for mostly Chinese and Japanese languages.

ruby

Markup container. For above-line pronunciation annotation.

rt

used inside ruby tag, for markup pronunciation

rp

used inside ruby tag, for browsers that do not support the ruby tag.

Example. English

browser shows

café/kaˈfeɪ/

Code

<ruby>café<rt>/kaˈfeɪ/</rt></ruby>

ruby {
 font-size: 2rem;
}
ruby rt {
 color: green;
}

Example

Example. Chinese with pinyin

汉hàn字zì

<p><ruby>汉<rt>hàn</rt>字<rt>zì </rt></ruby></p>

Example. Japanese

漢かん字じ

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

The rp tag

The rp tag is used to add parenthesis around the pronunciation symbols for browsers that do 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>
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}.