ใน HTML5 มีการสนับสนุนแท็ก <ruby> ซึ่งใช้เพื่อแสดงคำอธิบายหรือการออกเสียงเพิ่มเติมของข้อความที่เขียนเป็นตัวอักษร เช่น การแสดงฟูริงานะ (furigana) บนตัวอักษรคันจิ (Kanji) ในภาษาญี่ปุ่น หรือเพื่อแสดงการออกเสียงพินอิน (Pinyin) ของภาษาจีน โดยโครงสร้างของ <ruby> จะมีแท็กย่อยๆ เช่น <rt> และ <rp> ประกอบอยู่ด้วยเพื่อทำให้การแสดงผลสมบูรณ์และถูกต้องมากขึ้น
โครงสร้างและคำอธิบายแท็ก
<ruby>: เป็นแท็กหลัก ใช้ครอบข้อความที่ต้องการอธิบาย<rt>(ruby text): ใช้เพื่อระบุคำอ่านหรือการออกเสียงเพิ่มเติม<rp>(ruby parentheses): ใช้ระบุข้อความสำรองในกรณีที่เบราว์เซอร์ไม่รองรับการแสดงผลของแท็ก<ruby>ซึ่งปกติจะใช้เพื่อใส่วงเล็บให้คำอธิบายปรากฏอย่างถูกต้อง
ตัวอย่างการใช้งาน
1. การใช้งานพื้นฐานสำหรับภาษาญี่ปุ่น (ฟูริงานะ)
<p>
เขียนคำว่า <ruby>学校<rt>がっこう</rt></ruby> (โรงเรียน) ด้วยภาษาญี่ปุ่น
</p>ในตัวอย่างนี้:
<ruby>ครอบคำว่า “学校” (Kanji สำหรับคำว่า โรงเรียน)<rt>ระบุคำอ่านว่า “がっこう” (Furigana สำหรับ “学校”)
ผลลัพธ์จะแสดงคำว่า 学校 และฟูริงานะ がっこう อยู่ด้านบนของคำว่า “学校”
2. การใช้งานสำหรับการออกเสียงพินอินในภาษาจีน
<p>
คำว่า <ruby>汉字<rt>hàn zì</rt></ruby> หมายถึงตัวอักษรจีน
</p>ในตัวอย่างนี้:
<ruby>ครอบคำว่า “汉字” (ตัวอักษรจีน)<rt>ระบุการออกเสียงเป็นพินอิน “hàn zì”
ผลลัพธ์จะแสดงคำว่า 汉字 และพินอิน hàn zì อยู่ด้านบน
3. การใช้ <rp> เพื่อเพิ่มความเข้ากันได้กับเบราว์เซอร์เก่า
บางครั้งเบราว์เซอร์เก่าๆ อาจไม่รองรับ <ruby> ซึ่งสามารถใช้ <rp> เพื่อเพิ่มวงเล็บสำหรับคำอ่านแทนได้
<p>
ตัวอย่างคำว่า <ruby>漢字<rp>(</rp><rt>hàn zì</rt><rp>)</rp></ruby> ในภาษาจีน
</p>ในตัวอย่างนี้:
<rp>จะครอบวงเล็บซ้ายและขวา เพื่อให้เบราว์เซอร์ที่ไม่รองรับ<ruby>จะแสดงเป็น “漢字(hàn zì)” ซึ่งทำให้ผู้อ่านเข้าใจได้ง่ายขึ้น
4. การใช้หลายชุด <rt> ในคำเดียวกัน
ถ้าเราต้องการให้คำในหลายพยางค์มีการอธิบายแยกเป็นส่วนๆ สามารถใช้หลาย <rt> ได้
<p>
คำว่า <ruby>明日<rt>あ</rt><rt>した</rt></ruby> หมายถึงวันพรุ่งนี้ในภาษาญี่ปุ่น
</p>ในตัวอย่างนี้:
- “明日” (พรุ่งนี้) จะแบ่งคำอ่านฟูริงานะเป็นสองส่วน (あ และ した)
5. การใช้งานในภาษาที่ไม่ใช่เอเชีย
นอกจากนี้ <ruby> ยังสามารถใช้ในภาษาอื่นๆ ที่ต้องการแสดงการออกเสียงคำหรือความหมายเพิ่มเติม เช่น ช่วยในการออกเสียงคำศัพท์ภาษาต่างประเทศ
<p>
คำว่า <ruby>résumé<rt>ray-zooh-may</rt></ruby> ในภาษาฝรั่งเศส
</p>ในตัวอย่างนี้:
- “résumé” เป็นคำภาษาฝรั่งเศส และ
<rt>จะระบุการออกเสียงเป็นภาษาอังกฤษ
สรุป
การใช้แท็ก <ruby> และแท็กย่อยต่างๆ ช่วยให้สามารถเพิ่มคำอ่านหรือคำอธิบายเพิ่มเติมในข้อความได้ โดยเฉพาะอย่างยิ่งในกรณีของภาษาที่มีตัวอักษรซับซ้อน เช่น ญี่ปุ่นหรือจีน