<ruby>: The RUBY Element
Last updated: 2026-10-13
<ruby>The RUBY Element
Adds pronunciation/annotation (pinyin, kana) to East-Asian text; the note is given by rt, optionally wrapped by rp.
| Category | Text Content |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </ruby> tag |
| Status | Standard |
📝 Syntax
<ruby>漢<rt>かん</rt></ruby>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <ruby> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： ruby is natively supported for annotations; unsupported browsers ignore rt.
❓ FAQ
QWhat does the ruby tag do?
A
<ruby> renders phonetic annotations: base text with small characters above. Typical for Japanese furigana and Chinese pinyin, e.g. <ruby>漢字<rt>かんじ</rt></ruby> — the browser places the annotation over the text automatically.QWhat are rt and rp for?
A
<rt> is the annotation text itself (pinyin or kana); <rp> provides fallback parentheses for browsers without ruby support, e.g. <rp>(</rp><rt>かんじ</rt><rp>)</rp> — supporting browsers hide the rp automatically. Modern browsers all support ruby, so rp is mostly defensive writing.QHow do I annotate Chinese with pinyin?
AOne ruby group per character:
<ruby>汉<rt>hàn</rt></ruby><ruby>字<rt>zì</rt></ruby>. Putting a whole word in one ruby crams multiple pinyin together and misaligns; per-character groups give the steadiest layout.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
