Tag rt

The <rt> (ruby text) tag is used in conjunction with the <ruby> tag to provide pronunciation, definition, or annotationfor the base text—commonly used in East Asian languages such as Japanese, Chinese, or Korean.

📌 What Is the <rt> Tag?

  • <rt> stands for ruby text.
  • It is used inside a <ruby> element to provide a short annotation for characters.
  • The annotation is typically displayed above (in horizontal writing) or to the right (in vertical writing) of the base text.
  • Usually paired with <rb> (ruby base) and optionally wrapped with <rp> for fallback text.

✅ Basic Syntax

<ruby>
  漢 <rt>かん</rt>
</ruby>

In Japanese, this renders “漢” with the furigana “かん” above it.

🧩 Structure Diagram

<ruby>
  Base character(s)
  <rt>Annotation or pronunciation</rt>
</ruby>

🧪 Example 1: Japanese Furigana

<p>
  <ruby>
    学校 <rt>がっこう</rt>
  </ruby> へ行きます。
</p>

Rendered in supported browsers:
→ “学校” has “がっこう” displayed as small text above it.

🧪 Example 2: Using <rt> with <rp> for Compatibility

<ruby>
  日本 <rp>(</rp><rt>にほん</rt><rp>)</rp>
</ruby>

This ensures fallback parentheses are shown in browsers that don’t support ruby annotations:

  • Ruby-enabled browser: 日本 with “にほん” above it
  • Legacy browser: 日本(にほん)

💡 Use Cases

Use CaseDescription
FuriganaShowing pronunciation of kanji (e.g., Japanese)
PinyinDisplaying Chinese pronunciation
DefinitionsShowing English definition for foreign words
Phonetic guidesAssisting children or language learners

🔧 Styling <rt> with CSS

Ruby text is usually smaller. You can style it for better visibility:

rt {
  font-size: 0.7em;
  color: #666;
}

Add spacing or custom alignment if needed:

ruby {
  ruby-position: over; /* or 'under' for vertical writing */
}

⚠️ Browser Support and Tips

  • All modern browsers support <rt>, but you should still include <rp> for maximum compatibility.
  • Don’t overuse ruby for normal text—it’s mainly for special contexts (language learning, translation, pronunciation).
  • Nesting multiple <rt> elements for complex annotations is allowed but keep it semantic.

🏁 Summary

The <rt> tag is a powerful, semantic HTML element used within <ruby> to provide phonetic or explanatory text for characters. It enhances accessibility, learning, and multilingual support on the web, especially for East Asian content.