HTML: Ruby Tag

By Xah Lee. Date: . Last updated: .

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

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

here's what your browser shows:

かんじ , hàn, ㄏㄢˋㄗˋ

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}


Markup container. For above-line pronunciation annotation.
used inside ruby tag, for markup pronunciation
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.


xyz <rp>(</rp><rt>abc</rt><rp>)</rp>

what your browser shows: xyz (abc)

Browser Support