วิธีแสดง Ruby Annotation ใน HTML5

แท็ก <ruby> ใน HTML ระบุ Ruby Annotations ซึ่งใช้สำหรับการออกเสียงของตัวอักษรภาษาเอเชียตะวันออก คุณสามารถลองรันโค้ดต่อไปนี้เพื่อแสดง Ruby Annotation:

ตัวอย่าง

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML Ruby Tag</title> 
  </head> 
  <body> 
    <ruby> 
      漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 
      字 <rp>(</rp><rt>ji</rt><rp>)</rp> 
    </ruby> 
  </body> 
</html>

โครงสร้าง Ruby Annotation:

• <ruby> - กรอบรอบทั้งหมด
• <rt> - Ruby Text (การออกเสียง/คำอธิบาย)
• <rp> - Ruby Parentheses - วงเล็บสำหรับเบราว์เซอร์ที่ไม่รองรับ ruby

การแสดงผล: เบราว์เซอร์ที่รองรับ จะแสดง rt เหนือ/ข้างข้อความหลัก (base text) เบราว์เซอร์ที่ไม่รองรับ จะแสดง rp (วงเล็บ) รอบ rt