Элемент HTML <ruby> — мощный инструмент для улучшения представления текста, особенно для языков Восточной Азии. Этот элемент позволяет отображать фонетические аннотации или другую дополнительную информацию над основным текстом или рядом с ним. Начиная с Chrome 128, аннотации Ruby будут разрываться по строкам, и вы сможете стилизовать текст Ruby с помощью свойства CSS ruby-align .
Элемент <ruby> состоит из двух основных частей: основы Ruby , которая является основным текстом, и текста Ruby, который представляет собой текст аннотации, размеченный элементом <rt> . Текст Ruby может отображаться поверх или под основой Ruby, как показано в следующих примерах.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Почему его называют рубиновым?
Когда книги набирались с использованием подвижных шрифтов, размеры этих подвижных шрифтов определялись в названиях размером в пункт, таких как Perl и Diamond. Ruby использовался в британской системе для обозначения размера 5,5 пункта. Японские типографии использовали для текста аннотаций размер, аналогичный Ruby (5,5 пункта), и поэтому в печатных изданиях сам текст аннотации стал называться Ruby (или фонетически Rubi). Когда текст аннотации был включен в HTML, элемент определялся как <ruby> . Пика ( pc ) — еще одно историческое название размера точки, используемое в CSS в качестве единицы размера шрифта.
Разрываемый по линиям рубин
Раньше, если Ruby-основа или Ruby-текст были длиннее целой строки, они переносились индивидуально, что создавало проблемы с макетом. Чтобы преодолеть эту проблему, веб-разработчики часто размечают фрагмент текста, используя несколько тегов Ruby. Используя Ruby с разрывом строк, вы можете пропустить создание такой разметки.
В следующем примере пиньинь (латинизация китайского языка) добавлена как один из наборов рубиновых аннотаций к классической китайской поэзии. Текущие результаты рендеринга переносятся в текстовую область рубиновой аннотации.
Рендеринг из Chrome 128 с разрывом строк Ruby помещает обернутый текст аннотации Ruby поверх обернутого базового текста, обеспечивая идеальную визуализацию текста.
В другом примере из японской литературы разрыв строки происходит перед длинным рубиновым элементом, создавая пустое пространство в первой строке.
В Ruby с разрывом строки разрыв строки размещается в середине длинного элемента Ruby, что обеспечивает идеальную компоновку.
Эта функция не разбивает короткий рубиновый текст, содержащий менее или равно четырем базовым символам и менее или равно восьми символам аннотации.
Когда элемент <ruby> вложен внутри другого элемента <ruby> , внутренний элемент <ruby> не переносит строку.
Поскольку это меняет поведение текущих веб-страниц, использующих длинный текст Ruby, если вам нужно отключить такое поведение разрыва строки, применение white-space:nowrap как обычно отключает разрыв строки внутри целевого элемента.
Свойство CSS ruby-align
Новое свойство CSS ruby-align также доступно в Chrome 128. Это свойство принимает одно из значений ключевых слов space-around , space-between , start и center и управляет выравниванием базового текста Ruby и текста аннотации Ruby.
