HTML <ruby> öğesi, özellikle Doğu Asya dillerinde metin sunumunu geliştirmek için kullanılan güçlü bir araçtır. Bu öğe, temel metnin üzerinde veya yanında fonetik ek açıklamalar ya da diğer ek bilgileri görüntülemenizi sağlar. Chrome 128'den itibaren, ruby açıklaması satıra ayrılabilecek ve ruby metnine ruby-align CSS mülkü ile stil kazandırabilecek.
Bir <ruby> öğesi, ana metin olan ruby base ve <rt> öğesiyle işaretlenmiş ek açıklama metni olan ruby text olmak üzere iki ana bölümden oluşur. Ruby metni, aşağıdaki örneklerde gösterildiği gibi yakut tabanının üzerinde veya altında görüntülenebilir.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Neden yakut deniyor?
Kitaplar taşınabilir türler kullanılarak yazı tipiyle oluşturulduğunda, bu taşınabilir türlerin boyutları Perl ve Diamond gibi nokta boyutundaki adlarla tanımlanıyordu. İngiliz sisteminde Ruby, 5,5 punto boyutuna atıfta bulunmak için kullanılmıştır. Japon yazıcılar, ek açıklama metinleri için Ruby'ye (5,5 punto) benzer bir boyut kullanmıştır.Bu nedenle, baskılarda ek açıklama metnine Ruby (veya Rubi fonetik olarak) adını vermeye başlamıştır. Ek açıklama metni HTML'ye eklendiğinde öğe <ruby> olarak tanımlanır. Pica (pc), CSS'de yazı tipi boyutu birimi olarak kullanılan başka bir geçmiş nokta boyutu adıdır.
Çizgi kırılabilir yakut
Eskiden yakut üssü veya yakut metin bütün bir satırdan uzunsa tek tek sarmalanıp düzen görevleri oluşturuluyordu. Web geliştiricileri bunun üstesinden gelmek için genellikle bir metin parçasını birden çok ruby etiketi kullanarak işaretler. Çizgi kırılabilir yakut ile bu tür işaretleme oluşturmayı atlayabilirsiniz.
Aşağıdaki örnekte, pinyin (Çince yazımı), klasik Çin şiirinde yakut notlarından bir grup olarak eklenmiştir. Mevcut oluşturma sonuçları, ruby açıklaması metin alanının içinde sarmalanır.
Chrome 128'den satır kırılabilir yakut yer işaretleriyle oluşturulan oluşturmada, sarmalanmış temel metnin üzerine sarmalanmış yakut ek açıklama metni yerleştirilerek ideal metin oluşturma elde ediliyor.
Japon edebiyatındaki başka bir örnekte ise satır sonu, uzun yakut elemanından önce gelir ve ilk satırda bir boşluk oluşturur.
Çizgi kırılabilir yakut ile ideal düzen sağlamak için uzun yakut elemanının ortasına yerleştirilmiş satır sonu.
Bu özellik, dört temel karakterden az ya da buna eşit ve sekiz ek açıklama karakterinden az veya buna eşit olan kısa yakut metinleri bozmaz.
Bir <ruby> öğesi başka bir <ruby> öğesinin içine yerleştirildiğinde, iç <ruby> öğesi satır sonu olmaz.
Bu işlem, uzun ruby metni kullanan mevcut web sayfalarının davranışını değiştirdiğinden, bu satır sonu davranışını devre dışı bırakmanız gerekirse white-space:nowrap uygulandığında hedef öğe içinde satır sonu özelliği her zamanki gibi devre dışı bırakılır.
ruby-align CSS mülkü
Yeni CSS mülkü ruby-align, Chrome 128'den de kullanılabilir. Mülk space-around, space-between, start ve center anahtar kelime değerlerinden birini kabul eder ve yakut temel metni ile ruby ek açıklama metninin hizalamasını kontrol eder.
