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>passé <rt>/paˈsā/</rt></ruby>

Here is the CSS code:

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

Syntax

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.

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}.