<ruby>
Small annotations shown above (or beside) the base text — pronunciation hints in Chinese and Japanese, transcriptions, glosses.
Syntax
<ruby>base<rp>(</rp><rt>annotation</rt><rp>)</rp></ruby>Attributes
| Parameter | Type | Description |
|---|---|---|
| <rt> | element | The annotation text for the preceding base text. |
| <rp> | element | Fallback brackets around `<rt>`, shown only by browsers that do not support ruby. |
Examples
Pinyin above Chinese characters:
<p style="font-size: 28px;">
<ruby>漢<rp>(</rp><rt>hàn</rt><rp>)</rp>字<rp>(</rp><rt>zì</rt><rp>)</rp></ruby>
</p>A transcription above an English word:
<p style="font-size: 24px;">
<ruby>colonel<rt>ˈkɜːnəl</rt></ruby> is pronounced like "kernel".
</p>Notes
Each <rt> annotates the text right before it, so you can pair them character by character, as in the first example. The CSS property ruby-position: under moves annotations below the text. All current browsers support ruby, so <rp> matters mostly for copying text and for very old software.
See also
In the tutorial
- Text formatting — Inline tags for text — strong and em, mark, del and ins, sub and sup, code, kbd and pre, abbr and q.