<ruby>
The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can also be used for annotating other kinds of text, but this usage is less common.
The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 38 | 5 | 18 | 4.2 | |
| Other | ||||||
| The HTML element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the element. One element should enclose each of the opening and closing parentheses that wrap the rt element that contains the annotation's text. | 5 | 12 | 38 | 5 | 18 | 4.2 |
| The HTML element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The element must always be contained within a ruby element. | 5 | 12 | 38 | 5 | 18 | 4.2 |
- Nested `<rt>` elements do not render correctly due to missing `display: ruby-text` styling. See bug 347597919.
- Nested `<rt>` elements do not render correctly due to missing `display: ruby-text` styling. See bug 265316.
- Nested `<rt>` elements do not render correctly due to missing `display: ruby-text` styling. See bug 347597919.
- Nested `<rt>` elements do not render correctly due to missing `display: ruby-text` styling. See bug 265316.
Syntax
<ruby><rt>Kanji</rt></ruby>
<ruby>Tokyo</ruby>Live demo
Use cases
-
Using <ruby>
The <ruby> HTML element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.