HTML5 การใช้งาน rt Tag

ใน HTML5 แท็ก <rt> เป็นแท็กที่ใช้กำกับคำอ่านหรือคำอธิบาย (เช่น คำสะกด การออกเสียง) สำหรับตัวอักษรหรือคำที่อยู่ในแท็ก <ruby> ซึ่งส่วนใหญ่จะใช้ในการแสดงคำอ่านพินอินในภาษาจีนหรือฟุริงานะในภาษาญี่ปุ่น

แท็ก <rt> มักใช้ร่วมกับ <ruby> และ <rp> เพื่อให้รองรับกับเบราว์เซอร์ที่ไม่สนับสนุนแท็ก <ruby>

โครงสร้างพื้นฐาน

HTML
<ruby>
  คำหรือข้อความ <rt> คำอธิบาย
</ruby>

ตัวอย่างการใช้งาน

1. การใช้ <rt> เพื่อกำกับคำอ่านของภาษาญี่ปุ่น (ฟุริงานะ)

ในภาษาญี่ปุ่น จะใช้แท็ก <rt> เพื่อแสดงคำอ่านหรือการออกเสียง (ฟุริงานะ) ของคำที่เขียนด้วยตัวอักษรคันจิ

HTML
<ruby>
  漢字 <rt>かんじ</rt>
</ruby>

การแสดงผล:

漢字 (อ่านว่า かんじ)

2. การใช้ <rt> เพื่อกำกับคำอ่านพินอินในภาษาจีน

ในภาษาจีนจะใช้พินอินเพื่อแสดงการออกเสียงของตัวอักษรจีน

HTML
<ruby>
  中文 <rt>zhōng wén</rt>
</ruby>

การแสดงผล:
中文 (อ่านว่า zhōng wén)

3. การใช้แท็ก <rp> เพื่อรองรับเบราว์เซอร์ที่ไม่สนับสนุน <ruby>

แท็ก <rp> ใช้สำหรับใส่ข้อความหรือสัญลักษณ์เสริมที่จะแสดงหากเบราว์เซอร์ไม่รองรับแท็ก <ruby>

HTML
<ruby>
  漢字 <rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

การแสดงผลบนเบราว์เซอร์ที่ไม่รองรับ <ruby>:
漢字 (かんじ)

4. การใช้ <rt> กับคำที่ไม่มีการเขียนซับซ้อน

แม้ <rt> จะถูกออกแบบมาเพื่อกำกับคำอ่านของคำในภาษาที่มีการเขียนซับซ้อน เช่น จีนหรือญี่ปุ่น แต่มันก็สามารถใช้กำกับคำอ่านหรือคำแปลสำหรับคำในภาษาอื่นๆ ได้

HTML
<ruby>
  word <rt>คำอ่าน</rt>
</ruby>

การแสดงผล:
word (อ่านว่า คำอ่าน)

สรุป

แท็ก <rt> มีประโยชน์ในการช่วยกำกับคำอ่านหรือคำอธิบายให้กับคำที่อยู่ในแท็ก <ruby> โดยส่วนใหญ่จะใช้งานในภาษาที่มีการเขียนซับซ้อนเช่น ภาษาจีนและภาษาญี่ปุ่น แต่ก็สามารถประยุกต์ใช้ได้ในภาษาอื่นๆ

แชร์เรื่องนี้