Elemen <ruby> HTML adalah alat yang canggih untuk menyempurnakan presentasi teks, terutama untuk bahasa Asia Timur. Elemen ini memungkinkan Anda menampilkan anotasi fonetik atau informasi tambahan lainnya di atas atau di samping teks dasar. Mulai Chrome 128, anotasi ruby akan dapat dipisahkan baris, dan Anda dapat menata gaya teks ruby dengan properti CSS ruby-align.
Elemen <ruby> terdiri dari dua bagian utama, base ruby yang merupakan teks utama dan teks ruby yang merupakan teks anotasi, yang di-markup dengan elemen <rt>. Teks Ruby dapat ditampilkan di atas atau di bawah dasar ruby, seperti yang ditunjukkan pada contoh berikut.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Mengapa disebut ruby?
Ketika buku-buku diketik menggunakan jenis yang dapat dipindahkan, ukuran jenis yang dapat dipindahkan ini ditentukan dalam nama ukuran titik seperti Perl, dan Diamond. Ruby digunakan dalam sistem Inggris untuk merujuk pada ukuran 5,5 poin. Printer Jepang menggunakan ukuran yang mirip dengan Ruby (5,5 poin) untuk teks anotasi dan mulai merujuk pada teks anotasi itu sendiri sebagai Ruby (atau Rubi secara fonetik) dalam bentuk cetak. Saat teks anotasi disertakan dalam HTML, elemen ditentukan sebagai <ruby>. Pica (pc) adalah nama ukuran poin historis lain yang digunakan di CSS sebagai unit ukuran font.
Rubi yang bisa dipisahkan garis
Sebelumnya, jika dasar ruby atau teks rubi lebih panjang dari seluruh garis, keduanya digabungkan satu per satu untuk membuat tantangan tata letak. Untuk mengatasi hal ini, developer web sering menandai sepotong teks menggunakan beberapa tag ruby. Dengan ruby yang dapat dipisahkan baris, Anda tidak perlu membuat markup tersebut.
Dalam contoh berikut, pinyin (bahasa China) ditambahkan sebagai satu kumpulan anotasi rubi pada puisi klasik China. Hasil rendering saat ini digabungkan dalam area teks anotasi ruby.
Rendering dari Chrome 128 dengan tempat ruby yang dapat dipisahkan baris yang digabungkan dengan teks anotasi ruby di atas teks dasar yang digabungkan mencapai rendering teks yang ideal.
Dalam contoh lain dari literatur Jepang, baris baru terjadi sebelum elemen rubi panjang, menciptakan ruang kosong di baris pertama.
Dengan ruby yang dapat dipisahkan baris, baris baru ditempatkan di tengah elemen ruby panjang yang mencapai tata letak ideal.
Fitur ini tidak akan memecah teks ruby pendek yang memiliki kurang dari atau sama dengan empat karakter dasar dan kurang dari atau sama dengan delapan karakter anotasi.
Saat elemen <ruby> disusun bertingkat di dalam elemen <ruby> lain, elemen <ruby> bagian dalam tidak akan menjadi pemisah baris.
Karena perubahan ini akan mengubah perilaku halaman web saat ini yang menggunakan teks ruby panjang, jika Anda perlu menonaktifkan perilaku pemisah baris ini, penerapan white-space:nowrap akan menonaktifkan pemisah baris di dalam elemen target seperti biasa.
Properti CSS ruby-align
Properti CSS ruby-align yang baru juga tersedia mulai Chrome 128. Properti ini menerima salah satu nilai kata kunci space-around, space-between, start, dan center, serta mengontrol perataan teks dasar rubi dan teks anotasi ruby.
