Syntax
<ruby>
漢字<rt>かんじ</rt>
</ruby>Examples
Basic Ruby Annotation
Showing pronunciation above a kanji character.
<ruby>
東京<rt>とうきょう</rt>
</ruby>With Fallback Parentheses
Using rp so browsers without ruby support show the reading in parentheses instead.
<ruby>
漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>Multiple Annotated Characters
Annotating several characters within a sentence.
<p>
<ruby>今日<rt>きょう</rt></ruby>は
<ruby>晴<rt>は</rt></ruby>れです。
</p>Best practices
- Always include rp fallback parentheses so the pronunciation remains readable in browsers without ruby support
- Use ruby specifically for pronunciation guides or short annotations above text, primarily for East Asian languages
- Keep rt content short — it is meant to be a brief annotation, not a full translation
- Test rendering across browsers, since ruby support and default styling can vary
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<ruby>
Desktop
- Chrome
- Supported
From 5 - Firefox
- Supported
From 38 - Safari
- Supported
From 5 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 4.2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 5
Firefox
- From 38
Safari
- From 5
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 4.2
Chrome for Android
- From 18
Firefox for Android
- From 38
Samsung Internet
- From 1.0
<rt>
Desktop
- Chrome
- Supported
From 5 - Firefox
- Supported
From 38 - Safari
- Supported
From 5 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 4.2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 5 · Nested <rt> elements do not render correctly due to missing display: ruby-text styling. See bug 347597919.
Firefox
- From 38
Safari
- From 5 · Nested <rt> elements do not render correctly due to missing display: ruby-text styling. See bug 265316.
Edge
- From 12
Opera
- From 15 · Nested <rt> elements do not render correctly due to missing display: ruby-text styling. See bug 347597919.
Safari on iOS
- From 4.2 · Nested <rt> elements do not render correctly due to missing display: ruby-text styling. See bug 265316.
Chrome for Android
- From 18 · Nested <rt> elements do not render correctly due to missing display: ruby-text styling. See bug 347597919.
Firefox for Android
- From 38
Samsung Internet
- From 1.0 · Nested <rt> elements do not render correctly due to missing display: ruby-text styling. See bug 347597919.
<rp>
Desktop
- Chrome
- Supported
From 5 - Firefox
- Supported
From 38 - Safari
- Supported
From 5 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 4.2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 38 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 5
Firefox
- From 38
Safari
- From 5
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 4.2
Chrome for Android
- From 18
Firefox for Android
- From 38
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.