Łączony wiersz <ruby> i CSS ruby-align

Mariko Kosaka

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>

Wymowa angielska jako adnotacja do japońskiego tekstu podstawowego.

<ruby style="ruby-position: under;">
  강남대로
  <rt>江南大路</rt>
</ruby>

Dodano adnotację w języku chińskim pod koreańskim hangulem.

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.

Wynik renderowania w wersji wcześniejszej niż Chrome 128 z długim tekstem adnotacji ruby.

Renderowanie w Chrome 128 z rozdzielanym wierszem tekstu rubinowego powoduje umieszczenie zawijanego tekstu adnotacji rubinowych w celu zapewnienia idealnego renderowania tekstu.

Wynik renderowania z Chrome 128 z długim tekstem adnotacji rubinowej.

W innym przykładzie z literatury japońskiej podział wiersza następuje przed długim elementem rubinowym, tworząc pustą przestrzeń w pierwszym wierszu.

Wynik renderowania w wersji wcześniejszej niż Chrome 128 z długim tekstem w kolorze rubinowym

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.

Wynik renderowania z długiego tekstu w kolorze rubinowym pochodzący z Chrome 128.

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

Obsługa przeglądarek

• x
• x
• 38

Źródło

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.

Obraz przedstawiający przypadek użycia właściwości ruby-align.