องค์ประกอบ HTML <ruby> เป็นเครื่องมือที่มีประสิทธิภาพในการปรับปรุงข้อความที่นำเสนอ โดยเฉพาะสำหรับภาษาในเอเชียตะวันออก องค์ประกอบนี้ช่วยให้คุณแสดงคำอธิบายประกอบการออกเสียงหรือข้อมูลเสริมอื่นๆ เหนือหรือข้างข้อความฐาน ใน Chrome 128 คำอธิบายประกอบ Ruby จะแยกบรรทัดได้ และคุณจัดรูปแบบข้อความ Ruby โดยใช้พร็อพเพอร์ตี้ CSS ruby-align ได้
องค์ประกอบ <ruby> ประกอบด้วย 2 ส่วนหลัก ได้แก่ ฐานทับทิมซึ่งเป็นข้อความหลัก และข้อความ Ruby ซึ่งเป็นข้อความคำอธิบายประกอบที่มาร์กอัปด้วยองค์ประกอบ <rt> ข้อความทับทิมสามารถแสดงเหนือหรือใต้ฐานทับทิม ดังที่ปรากฏในตัวอย่างต่อไปนี้
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
ทำไมจึงเรียกว่าทับทิม
เมื่อมีการกำหนดประเภทหนังสือโดยใช้ประเภทที่เคลื่อนย้ายได้ ขนาดของประเภทที่เคลื่อนย้ายได้เหล่านี้จะกำหนดไว้ในชื่อแบบจุด เช่น Perl และ Diamond ทับทิมใช้ในระบบของอังกฤษหมายถึงขนาด 5.5 จุด เครื่องพิมพ์ญี่ปุ่นใช้ขนาดที่คล้ายกับ Ruby (5.5 จุด) สำหรับข้อความคำอธิบายประกอบ จึงเริ่มเรียกตัวข้อความคำอธิบายประกอบว่า Ruby (หรือ Rubi ตามการออกเสียง) ในภาพพิมพ์ เมื่อมีข้อความคำอธิบายประกอบอยู่ใน HTML องค์ประกอบจะได้รับการกำหนดเป็น <ruby> Pica (pc) เป็นอีกชื่อพอยต์ขนาดที่ผ่านมาซึ่งใช้ใน CSS เป็นหน่วยขนาดแบบอักษร
ทับทิมแบ่งบรรทัด
ก่อนหน้านี้หากข้อความทับทิมหรือข้อความทับทิมยาวเกิน 1 บรรทัด ระบบจะรวมข้อความเหล่านั้นไว้เพื่อสร้างความท้าทายด้านเลย์เอาต์แยกกัน ในการแก้ปัญหานี้ นักพัฒนาเว็บมักมาร์กอัปข้อความโดยใช้แท็ก Ruby หลายแท็ก คุณข้ามการสร้างมาร์กอัปดังกล่าวได้เมื่อใช้ Ruby ที่สามารถแบ่งบรรทัดได้
ในตัวอย่างต่อไปนี้ มีการเพิ่มพินอิน (อักษรโรมันของจีน) เป็นหนึ่งในชุดคำอธิบายประกอบทับทิมในบทกวีจีนคลาสสิก ผลการแสดงผลปัจจุบันจะรวมอยู่ภายในพื้นที่ข้อความคำอธิบายประกอบทับทิม
การแสดงภาพจาก Chrome 128 ที่มี Ruby แบบแบ่งบรรทัด วางข้อความคำอธิบายประกอบ Ruby ที่ห่อหุ้มไว้เหนือข้อความพื้นฐานที่ห่อหุ้มไว้เพื่อให้การแสดงผลข้อความสมบูรณ์แบบ
อีกตัวอย่างหนึ่งจากวรรณกรรมญี่ปุ่น การขึ้นบรรทัดใหม่จะเกิดขึ้นก่อนองค์ประกอบทับทิมแบบยาว ทำให้เกิดช่องว่างในบรรทัดแรก
ด้วยทับทิมที่แบ่งบรรทัดได้ ตัวแบ่งบรรทัดจะวางอยู่ตรงกลางขององค์ประกอบทับทิมยาวๆ เพื่อให้ได้เลย์เอาต์ที่สมบูรณ์แบบ
ฟีเจอร์นี้จะไม่แยกข้อความทับทิมสั้นๆ ซึ่งมีอักขระฐานน้อยกว่าหรือเท่ากับสี่ตัว และอักขระคำอธิบายประกอบน้อยกว่าหรือเท่ากับแปดตัว
เมื่อองค์ประกอบ <ruby> ซ้อนอยู่ภายในองค์ประกอบ <ruby> อื่น องค์ประกอบ <ruby> ภายในจะไม่ขึ้นบรรทัดใหม่
เนื่องจากการดำเนินการนี้จะเปลี่ยนลักษณะการทำงานของหน้าเว็บปัจจุบันที่ใช้ข้อความ Ruby แบบยาว หากคุณจําเป็นต้องปิดใช้ลักษณะการขึ้นบรรทัดนี้ การใช้ white-space:nowrap จะปิดใช้การขึ้นบรรทัดภายในองค์ประกอบเป้าหมายตามปกติ
พร็อพเพอร์ตี้ CSS ruby-align
นอกจากนี้ พร็อพเพอร์ตี้ CSS ใหม่ ruby-align ยังใช้จาก Chrome 128 ได้ด้วย พร็อพเพอร์ตี้นี้ยอมรับค่าคีย์เวิร์ด space-around, space-between, start และ center และควบคุมการจัดข้อความฐานของ Ruby และข้อความคำอธิบายประกอบ Ruby
