ruby-align เป็น Baseline กลับมาเปิดให้จองอีกครั้ง

Mariko Kosaka

เผยแพร่: 21 ก.พ. 2025

องค์ประกอบ HTML <ruby> ช่วยให้คุณแสดงคำอธิบายประกอบแบบออกเสียงหรือข้อมูลเพิ่มเติมอื่นๆ เหนือหรือข้างข้อความพื้นฐานได้ ซึ่งมักใช้ในภาษาเอเชียตะวันออก

องค์ประกอบ <ruby> ประกอบด้วย 2 ส่วนหลัก ได้แก่ ฐานทับทิมซึ่งเป็นข้อความหลักและข้อความทับทิมซึ่งเป็นข้อความคําอธิบายประกอบ ซึ่งทําเครื่องหมายด้วยองค์ประกอบ <rt>


<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

คําอธิบายประกอบ Ruby ภาษาอังกฤษ &quot;Emoji&quot; เหนือข้อความภาษาญี่ปุ่น
การออกเสียงภาษาอังกฤษเป็นคำอธิบายประกอบเหนือข้อความฐานภาษาญี่ปุ่น

ruby-align

พร็อพเพอร์ตี้ CSS ruby-align จะควบคุมการจัดแนวของข้อความฐาน Ruby และข้อความคำอธิบายประกอบ Ruby พร็อพเพอร์ตี้ยอมรับค่าคีย์เวิร์ดอย่างใดอย่างหนึ่งต่อไปนี้ space-around, space-between, start และ center

คําอธิบายประกอบ Ruby ของพินอินเหนือข้อความภาษาจีน
รูปภาพแสดงกรณีการใช้งานสำหรับพร็อพเพอร์ตี้ ruby-align