HTML <ruby> element

The <ruby> element groups base text with small annotations attached to it. It is most strongly associated with East Asian typography, where small pronunciation guides may be shown above, below, or beside characters.

A common use is to show how a Japanese kanji word is pronounced. The main characters form the base text, and the pronunciation is placed in an <rt> element. The browser then displays the annotation in the special ruby position rather than as ordinary inline text.

Write the base text first, followed by an <rt> containing its annotation. In the example below, 漢字 is the base word and かんじ supplies its Japanese reading. The global lang="ja" attribute identifies the language of that content.

The optional <rp> element can be used to provide fallback parentheses. Browsers that understand ruby normally hide those parentheses. Older or simpler systems that do not support ruby can then show the annotation in a readable form, such as 漢字(かんじ).

Although ruby is often described through Japanese or Chinese examples, its idea is more general: small explanatory text attached to a short piece of base text. That explanation might be pronunciation, transliteration, or another compact annotation.

The element should not be used just to make text look decorative or to create small floating labels. Its purpose is annotation tied closely to the base text. If the extra text is a normal explanation, a paragraph, note, or tooltip-like structure may be clearer.

Attributes: GLOBALS.

Typical layout:
<p><ruby lang="ja">漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby></p>

Visual representation: