HTML <ruby> tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

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>
baseannotation

ほん

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>

Attributes

The <ruby> element only supports the Global Attributes.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes