<ruby>
The <ruby> element produces small annotations that are rendered with its base text.
Overview
The <ruby> element produces small annotations that are rendered with its base text.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 38 | 5 | 18 | 4.2 | |
| Other | ||||||
| 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 |
| The 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. | 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> element produces small annotations that are rendered with its base text.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features