HTML <Ruby> Tag

Definition

The <ruby> element allows a word or phrase to be marked with ruby annotations. Ruby annotations are primarily used in East Asian typography to guide pronunciation or include other annotations.

Example

<ruby style=font-size:2em;>base<rt>annotation</ruby><br><br>
<ruby style=font-size:2em;>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>

Usage

• Both the opening and closing tags are required.
• The <ruby> element can be used with a <rp> (fallback parenthesis), and <rt> (text component or annotation).-
• The <ruby> element should consist of either:
  • One or the other of the following:
    • Phrasing content, but with no ruby elements and with no ruby element descendants.
    • A single <ruby> element with no <ruby> element descendants.
  • One or the other of the following:
    • One or more <rt> elements.
    • An <rp> element followed by one or more <rt> elements. Each <rt> should be followed by an <rp> element.
• You cannot yet fully control the rendering of <ruby> elements with CSS.

Further Examples

Here are some further examples by reference to their purpose:

• To describe the meaning of the base text, rather than pronunciation:

  <ruby>BASE<rt>annotation</ruby>

  <ruby>境界面<rt>インターフェース</ruby>

  <ruby lang="ja">編集者<rt lang="en">editor</ruby>

• For phonetic readings that correspond to multiple base characters:

  <ruby>紫陽花<rt>あじさい</ruby>

• For phonetic and semantic annotations (double-sided)

  <ruby>BASE<rt>annotation 1<rt>annotation 2</ruby>

  <ruby>B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby><ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</ruby>

• More complex situations with nested inner annotations, with the whole having an annotation

  <ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>annotation</ruby>

  Try them Yourself

Attributes

The <ruby> element only supports the Global Attributes.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile