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's what your browser shows:

passé /paˈsā/

Here's the HTML code:

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

Here's 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.

Example:

<ruby class="ruby44235">
xyz <rp>(</rp><rt>abc</rt><rp>)</rp>
</ruby>

what your browser shows: xyz (abc)

Browser Support

As of , browsers that support ruby annotation are: {Google Chrome, Firefox, Safari, IE9}.

As of , browsers that support ruby annotation are: {Google Chrome, Safari, IE9}.

Buy JavaScript in Depth

HTML Basics

HTML Table

Misc

HTML4 Frameset