ใน HTML5 แท็ก <rp> ถูกใช้ในโครงสร้างของข้อความแนวตั้งที่ใช้สำหรับการแสดง ruby annotations ซึ่งเป็นการเขียนคำอธิบายประกอบข้อความ เช่น การเขียนคำอ่านคันจิในภาษาญี่ปุ่น หรือคำอธิบายการออกเสียงอื่น ๆ แท็ก <rp> จะทำงานร่วมกับแท็ก <ruby> และ <rt>
โครงสร้างทั่วไปของ ruby annotation:
<ruby>: ใช้ในการกำหนดข้อความหลักที่ต้องการแสดงผลคำอธิบาย<rt>: ใช้ในการกำหนดคำอธิบายหรือคำอ่านของข้อความที่อยู่ใน<ruby><rp>: ใช้เพื่อแสดงผลวงเล็บหากเบราว์เซอร์ที่ไม่รองรับการแสดงผล ruby annotation
บทบาทของ <rp>
แท็ก <rp> มีประโยชน์สำหรับการรองรับเบราว์เซอร์ที่ไม่สามารถแสดงผลแท็ก <ruby> และ <rt> ได้ แท็กนี้จะถูกใช้เพื่อแสดงผลในลักษณะของการใช้เครื่องหมายวงเล็บ เช่น () หรือ [] รอบๆ คำอธิบาย
ตัวอย่างการใช้งาน
ตัวอย่างที่ 1: การแสดงผลแบบ ruby annotation ธรรมดา
HTML
<ruby>
漢字 <rt>かんじ</rt> <rp>(</rp>かんじ<rp>)</rp>
</ruby><ruby>: ครอบข้อความ “漢字” ที่เป็นข้อความหลัก<rt>: แสดงคำอ่านว่า “かんじ”<rp>: แสดงผลเป็นวงเล็บรอบคำอ่าน (สำหรับเบราว์เซอร์ที่ไม่รองรับ ruby annotation)
เมื่อเบราว์เซอร์รองรับ ruby annotation จะเห็นข้อความ “漢字” พร้อมคำอ่าน “かんじ” ด้านบน แต่หากเบราว์เซอร์ไม่รองรับ จะเห็นข้อความเป็น 漢字(かんじ)
ตัวอย่างที่ 2: การแสดงคำอธิบายประกอบหลายคำ
HTML
<ruby>
学校 <rt>がっこう</rt> <rp>(</rp>がっこう<rp>)</rp>
に行く <rt>にいく</rt> <rp>(</rp>にいく<rp>)</rp>
</ruby>ในตัวอย่างนี้
- ข้อความ “学校に行く” (ไปโรงเรียน) ถูกอธิบายด้วยการอ่านว่า “がっこう にいく”
- ถ้าเบราว์เซอร์ไม่รองรับ ruby annotation จะเห็นข้อความเป็น 学校(がっこう)に行く(にいく)
การประยุกต์ใช้งาน
- ใช้เพื่อแสดงผลคำอ่านหรือคำอธิบายของอักษรคันจิในภาษาญี่ปุ่นหรือภาษาจีน
- สามารถใช้สำหรับแสดงคำอ่านในภาษาอื่น ๆ เช่น คำที่เขียนเป็นตัวอักษรโรมัน (Romanized) จากภาษาอื่น
- ช่วยให้การแสดงผลบนเบราว์เซอร์ที่ไม่รองรับ
<ruby>ไม่ดูผิดปกติ และยังคงมีคำอธิบายที่สามารถเข้าใจได้
ข้อควรระวัง
- การใช้
<rp>ไม่จำเป็นต้องใส่ในทุก ๆ การใช้งาน<ruby>แต่แนะนำให้ใช้ในกรณีที่ต้องการให้รองรับเบราว์เซอร์เก่าหรือที่ไม่รองรับ ruby annotation
การใช้แท็ก <rp> เป็นการเตรียมความพร้อมเพื่อให้ข้อความยังคงมีความหมายและอ่านเข้าใจได้แม้ว่าจะไม่มีการแสดงผลในรูปแบบ ruby annotation โดยสมบูรณ์