<ruby> mudah dipecah dan properti CSS ruby-align

Elemen <ruby> HTML adalah alat yang canggih untuk meningkatkan kualitas 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 dipisah baris, dan Anda dapat menata gaya teks ruby dengan properti CSS ruby-align.

Elemen <ruby> terdiri dari dua bagian utama, dasar ruby yang merupakan teks utama dan teks ruby yang merupakan teks anotasi, yang ditandai 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?

Saat buku dicetak menggunakan jenis huruf yang dapat dipindahkan, ukuran jenis huruf 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. Pencetak Jepang menggunakan ukuran yang mirip dengan Ruby (5,5 poin) untuk teks anotasi, sehingga mulai menyebut teks anotasi itu sendiri sebagai Ruby (atau Rubi secara fonetik) dalam cetakan. Saat teks anotasi disertakan dalam HTML, elemen ditentukan sebagai <ruby>. Pica (pc) adalah nama ukuran titik historis lainnya yang digunakan di CSS sebagai satuan ukuran font.

Ruby yang dapat dipecah barisnya

Sebelumnya, jika ruby-base atau ruby-text lebih panjang dari seluruh baris, keduanya akan digabungkan satu per satu sehingga menimbulkan tantangan tata letak. Untuk mengatasi hal ini, developer web sering menandai potongan teks menggunakan beberapa tag ruby. Dengan ruby yang dapat dipecah barisnya, Anda dapat melewati pembuatan markup tersebut.

Pada contoh berikut, pinyin (romanisasi bahasa China) ditambahkan sebagai satu kumpulan anotasi ruby pada puisi klasik China. Hasil rendering saat ini digabungkan dalam area teks anotasi ruby.

Rendering dari Chrome 128 dengan ruby yang dapat dipecah barisnya menempatkan teks anotasi ruby yang digabungkan di atas teks dasar yang digabungkan untuk mencapai rendering teks yang ideal.

Dalam contoh lain dari literatur Jepang, jeda baris terjadi sebelum elemen ruby yang panjang, sehingga membuat spasi kosong di baris pertama.

Dengan ruby yang dapat dipecah barisnya, jeda baris ditempatkan di tengah elemen ruby yang panjang untuk mendapatkan tata letak yang ideal.

Fitur ini tidak akan merusak teks ruby singkat yang memiliki kurang dari atau sama dengan empat karakter dasar dan kurang dari atau sama dengan delapan karakter anotasi.

Jika elemen <ruby> disusun bertingkat di dalam elemen <ruby> lain, elemen <ruby> bagian dalam tidak akan memiliki baris baru.

Karena hal ini mengubah perilaku halaman web saat ini yang menggunakan teks ruby panjang, jika Anda perlu menonaktifkan perilaku pemisahan baris ini, menerapkan white-space:nowrap akan menonaktifkan pemisahan baris di dalam elemen target seperti biasa.

Properti CSS ruby-align

Properti CSS baru ruby-align juga tersedia mulai Chrome 128. Properti ini menerima salah satu nilai kata kuncispace-around, space-between, start, dan center, serta mengontrol perataan teks dasar ruby dan teks anotasi ruby.