HTML: Ruby Tag

Ruby tags are used for pronunciation markup. Mostly used in Japanese.

here's what your browser shows:

漢かん字じ　, 汉hàn字zì , 漢ㄏㄢˋ字ㄗˋ

English Example

Here is what your browser shows:

passé /paˈsā/

Here is the HTML code:

<ruby class="ruby44235">passé <rt>/paˈsā/</rt></ruby>

Here is the CSS code:

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

Syntax

ruby

Markup container. For above-line pronunciation annotation.

rt

used inside ruby, for markup pronunciation

rp

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

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 class="ruby44235">
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}.