Element HTML <ruby>
to zaawansowane narzędzie do ulepszania prezentacji tekstowej, zwłaszcza w językach wschodnioazjatyckich. Ten element umożliwia wyświetlanie adnotacji fonetycznych lub innych informacji uzupełniających nad lub obok tekstu podstawowego. Od wersji Chrome 128 adnotacja rubinowa będzie umożliwiała podział wierszy. Do tekstu możesz też dodawać styl za pomocą właściwości CSS ruby-align
.
Element <ruby>
składa się z 2 głównych części: podstawy rubinu, która jest tekstem głównym, i tekstu rubinowego, który jest tekstem adnotacji oznaczonym elementem <rt>
. Tekst Ruby może się wyświetlać nad lub pod podstawą rubinu, jak widać w poniższych przykładach.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Dlaczego nazywa się rubinem?
Kiedy książki były zapisywane przy użyciu typów ruchomych, ich rozmiary określano w nazwach punktowych, np. Perl i Diament. W systemie brytyjskim ruby odnosiło się do rozmiaru 5,5 punktu. Japońskie drukarki miały rozmiar podobny do Ruby (5,5 punktu) w tekście adnotacji, dlatego zaczęły na odbitkach określać go jako Ruby (lub fonetycznie). Gdy tekst adnotacji został umieszczony w kodzie HTML, element był zdefiniowany jako <ruby>
. Pica (pc
) to inna historyczna nazwa rozmiaru punktu używana w CSS jako jednostka rozmiaru czcionki.
Rubin z rozdzielaniem wierszy
Wcześniej, jeśli baza rubina lub tekst rubinowy były dłuższe niż cały wiersz, były zapakowane osobno, tworząc wyzwania układu. Aby rozwiązać ten problem, programiści stron internetowych często oznaczają fragment tekstu za pomocą wielu tagów rubinowych. W przypadku kodu rubinowego z rozdzielaniem wierszy nie musisz tworzyć takich znaczników.
W poniższym przykładzie dodano pinyin (latanizację języka chińskiego) jako jeden zestaw adnotacji rubinowych dotyczących klasycznej poezji chińskiej. Bieżące wyniki renderowania są zawijane do obszaru tekstowego adnotacji ruby.
Renderowanie w Chrome 128 z rozdzielanym wierszem tekstu rubinowego powoduje umieszczenie zawijanego tekstu adnotacji rubinowych w celu zapewnienia idealnego renderowania tekstu.
W innym przykładzie z literatury japońskiej podział wiersza następuje przed długim elementem rubinowym, tworząc pustą przestrzeń w pierwszym wierszu.
W przypadku rubinu z możliwością podziału wiersza podział wiersza jest umieszczany między długim elementem rubinowym, co zapewnia idealny układ.
Ta funkcja nie spowoduje zepsucia krótkiego tekstu w języku rubinowym, który ma do 4 znaków o podstawie lub mniej niż 8 znaków adnotacji.
Gdy element <ruby>
jest zagnieżdżony w innym elemencie <ruby>
, wewnętrzny element <ruby>
nie będzie mieć podziału wiersza.
Powoduje to zmianę zachowania bieżących stron internetowych korzystających z długiego tekstu w języku rubinowym. Jeśli więc musisz wyłączyć takie podziały wierszy, zastosowanie zasady white-space:nowrap
spowoduje wyłączenie łamania wierszy w elemencie docelowym w zwykły sposób.
Właściwość CSS ruby-align
Nowa właściwość CSS ruby-align
jest też dostępna w Chrome 128. Właściwość akceptuje jedną z wartości słów kluczowych space-around
, space-between
, start
i center
i kontroluje wyrównanie tekstu podstawowego i adnotacji rubinowych.