HTML <rt> тег
Тег <rt> используется для добавления аннотаций над или под текстом, размещённым внутри элемента <ruby>.
Тег <rt> содержит аннотацию — чтение, произношение или перевод — внутри элемента <ruby>. Элемент <ruby> связывает фрагмент базового текста с одной или несколькими аннотациями <rt> — техника, применяемая для показа произношения иероглифов восточноазиатских языков (японская фуригана, китайский пиньинь, корейский) или, в более широком смысле, любого краткого пояснения, напечатанного рядом с текстом.
По умолчанию браузер отображает содержимое <rt> мелким шрифтом над базовым текстом. Базовый текст — это всё, что находится внутри <ruby> и не обёрнуто в <rt>.
Тег <rt> относится к числу элементов HTML5.
Как работает <rt> внутри <ruby>
Ruby-аннотация состоит из двух частей: базового текста и аннотации. Аннотация помещается в <rt>, базовый текст остаётся без обёртки.
<ruby>漢字<rt>かんじ</rt></ruby>Здесь 漢字 — базовый текст, а かんじ — чтение, отображаемое над ним. Можно аннотировать каждый иероглиф отдельно, чтобы каждое чтение располагалось над соответствующим знаком:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>Современный паттерн с запасным вариантом <rp>
Некоторые браузеры (и большинство простых текстовых сред, программ чтения с экрана или буфер обмена) не могут отображать ruby-аннотации. Тег <rp> («ruby parenthesis») предоставляет запасные скобки, которые отображаются только там, где отрисовка ruby недоступна. Браузеры, поддерживающие ruby, скрывают содержимое <rp>.
Ниже приведён рекомендуемый канонический паттерн:
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>- В браузере с поддержкой ruby отображается
かんじнад漢字, а скобки скрыты. - В контексте без поддержки ruby текст деградирует до читаемого
漢字(かんじ).
Всегда оборачивайте каждый <rt> парой элементов <rp>, чтобы обеспечить надёжный запасной вариант.
Полный пример
HTML тег <rt>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
</body>
</html>Результат
Синтаксис и пропуск закрывающего тега
Тег <rt> используется парно, однако закрывающий тег можно опустить, если сразу после <rt> следует другой <rt> или элемент <rp>, либо если в родительском элементе <ruby> не осталось контента.
Примечание о <rb> и <rtc>
В старых руководствах можно встретить теги <rb> (ruby base) и <rtc> (ruby text container) для разметки сложных многоуровневых аннотаций. Эти элементы удалены из стандарта HTML и считаются устаревшими. Они имеют непоследовательную поддержку в браузерах и не должны использоваться в новом коде.
Для базового текста просто оставляйте его без обёртки внутри <ruby>, не заключая в <rb>. Придерживайтесь современного паттерна <ruby> + <rt> (+ <rp>), показанного выше.
Стилизация позиции аннотации
CSS-свойство ruby-position управляет расположением аннотации <rt> относительно базового текста: over (над текстом — значение по умолчанию для большинства письменностей), under (под текстом) или inter-character. Например:
ruby {
ruby-position: under;
}Это перемещает чтение под базовые символы, что принято в некоторых языках. Свойство ruby-position поддерживается во всех актуальных основных браузерах.
Поддержка браузерами
Ruby-аннотация (<ruby>, <rt> и <rp>) поддерживается во всех современных браузерах, включая Chrome, Edge, Firefox и Safari.
Атрибуты
Тег <rt> поддерживает глобальные атрибуты и атрибуты событий.