The <rp>
(ruby parentheses) tag is used inside a <ruby>
element to provide fallback parentheses for browsers that do not support ruby annotations. Ruby annotations are commonly used in East Asian typography (especially Japanese and Chinese) to show pronunciation guides, such as furigana (phonetic aids above kanji).
📌 What Is the <rp>
Tag?
<rp>
stands for ruby parentheses.- It surrounds ruby text (inside
<rt>
) with parentheses as a fallback, when ruby rendering isn’t supported. - It only appears if the browser does not support ruby annotations.
- Typically used alongside
<ruby>
,<rt>
, and optionally<rb>
.
✅ Basic Syntax
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
✅ In ruby-enabled browsers:
→ 漢 with small furigana “かん” above it
❌ In non-ruby browsers:
→ 漢(かん)
🧩 Structure Diagram
<ruby>
Base character(s)
<rp>(</rp>
<rt>Ruby text</rt>
<rp>)</rp>
</ruby>
🧪 Example 1: Japanese Furigana
<p>
<ruby>
東京 <rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>は日本の首都です。
</p>
🔹 Ruby-supported browser output:
→ 東京 (with small “とうきょう” above it) は日本の首都です。
🔸 Non-ruby browser output:
→ 東京(とうきょう)は日本の首都です。
🧪 Example 2: Chinese Pinyin Guide
<ruby>
汉字 <rp>(</rp><rt>hànzì</rt><rp>)</rp>
</ruby>
Used to show how to pronounce Chinese characters with pinyin.
💡 Why Use <rp>
?
Feature | Benefit |
---|---|
Accessibility | Allows all users to understand pronunciation, even with older browsers |
Graceful degradation | Ensures content is still readable |
Internationalization | Supports East Asian educational content and dual-language interfaces |
🎨 Styling Ruby and <rp>
rp {
display: none; /* hide in modern browsers */
font-style: italic;
}
⚠️ Best Practices
- Always use
<rp>
when using<ruby>
for broader browser support. - Do not rely on
<rp>
alone; it is only a fallback, not visible in modern browsers. - Pair
<rp>
with<rt>
to show alternate pronunciation or translation. - Keep ruby annotations short to prevent layout issues on small screens.
🏁 Summary
The <rp>
tag plays a quiet but important role in ensuring accessibility and fallback compatibility for ruby annotations. While modern browsers show ruby text beautifully, <rp>
ensures that older browsers still present pronunciation guides in a readable form.