Ruby-align — это базовая версия. Недавно доступно.

Mariko Kosaka

Опубликовано: 21 февраля 2025 г.

HTML-элемент <ruby> позволяет отображать фонетические аннотации или другую дополнительную информацию над основным текстом или рядом с ним. Он широко используется в языках Восточной Азии.

Элемент <ruby> состоит из двух основных частей: основы Ruby, которая является основным текстом, и текста Ruby, который представляет собой текст аннотации, размеченный элементом <rt> .


<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

Английская рубиновая аннотация «Эмодзи» поверх японского текста.
Английское произношение в виде аннотации к базовому японскому тексту.

ruby-align

Свойство CSS ruby-align управляет выравниванием базового текста Ruby и текста аннотаций Ruby. Свойство принимает одно из значений ключевых слов: space-around , space-between , start и center .

Рубиновая аннотация пиньинь поверх китайского текста.
Изображение, показывающее вариант использования свойства Ruby-align.