Cách hiển thị chú thích ruby (ruby annotation) trong HTML5?

Thẻ <ruby> (HTML5) hiển thị chú thích phát âm (ruby text) cho ký tự Hán-Việt, Nhật (Kanji), Hàn (Hanja), Trung. Cấu trúc: <ruby>Base<rt>Ruby</rt></ruby>.

Ví dụ

<!DOCTYPE html>
<html>
  <head>
    <title>Thẻ ruby HTML</title>
  </head>
  <body>
    <ruby>
      漢 <rt>Kan</rt>
      字 <rt>ji</rt>
    </ruby>
    <br>
    <ruby>
      北 <rt>Bắc</rt>
      京 <rt>Kinh</rt>
    </ruby>
  </body>
</html>

Các thẻ liên quan

• <ruby>: Container.
• <rt>: Ruby text (phát âm).
• <rp>: Fallback parentheses cho trình duyệt không hỗ trợ ruby (hiển thị: (Kan)).
• <rb>: Base text tách rõ (hiếm dùng).
• <rtc>: Ruby text container (cho nhiều dòng ruby).

Ví dụ với rp (fallback)

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<!-- Trình duyệt hỗ trợ: 漢 Kan 字 ji -->
<!-- Trình duyệt không hỗ trợ: 漢 (Kan) 字 (ji) -->

CSS ruby

ruby { ruby-position: over; } /* over (mặc định), under, inter-character */