Tag ruby

The <ruby> tag in HTML is used to display ruby annotations—small text that appears above or beside characters. It is particularly useful in East Asian languages (e.g., Japanese, Chinese, Korean) to provide pronunciation, translation, or explanation for complex characters.

---

📌 What Is the <ruby> Tag?

• The <ruby> element wraps base text (characters) that needs annotation.
• It is used alongside:
  • <rt> — ruby text (the annotation or pronunciation).
  • <rp> — ruby parentheses (fallback for unsupported browsers).
  • Optionally <rb> — ruby base (explicitly marks the annotated text, often omitted).

---

✅ Basic Syntax

<ruby>
  Base text
  <rt>Annotation</rt>
</ruby>

---

🧩 Structure Diagram

<ruby>
  学校
  <rt>がっこう</rt>
</ruby>

In browsers that support ruby:
→ 学校 is shown with “がっこう” (furigana) above it.

---

🧪 Example 1: Japanese Furigana

htmlCopyEdit<p>
  <ruby>
    東京 <rt>とうきょう</rt>
  </ruby> は日本の首都です。
</p>

✔️ Output (with ruby support):
“東京” appears with small phonetic text “とうきょう” above it.

❌ Output (fallback with <rp> added):
“東京(とうきょう)”

---

🧪 Example 2: Ruby with <rp> for Compatibility

<ruby>
  学生 <rp>(</rp><rt>がくせい</rt><rp>)</rp>
</ruby>

This ensures older browsers display: 学生(がくせい)

---

🧪 Example 3: Chinese Characters with Pinyin

<ruby>
  汉字 <rt>hànzì</rt>
</ruby>

Use this to teach Chinese pronunciation.

---

💡 When to Use <ruby>

Use Case	Description
Furigana	For Japanese kanji reading
Pinyin	Chinese pronunciation in Latin letters
Korean annotations	Hangul pronunciation for Hanja
Language learning	Displaying translation or definition

---

🎨 Styling Ruby Text with CSS

ruby {
  ruby-position: over; /* Default is above text */
}

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

You can also hide <rp> in modern browsers:

rp {
  display: none;
}

---

⚠️ Browser Support

Browser	<ruby> Support
Chrome	✅ Yes
Firefox	✅ Yes
Safari	✅ Yes
Edge	✅ Yes
IE 11	⚠️ Limited (use <rp> for fallback)

---

🏁 Summary

The <ruby> tag adds semantic, accessible pronunciation or definition hints to complex characters. It is essential for East Asian web content, language learning apps, dictionaries, and educational material.

💬 The <ruby> element makes your content easier to read and learn, especially for learners of Japanese and Chinese.