Тег rt (от английского ruby text) записывает аннотацию внутри тега ruby: чтение иероглифа, транскрипцию, пояснение к слову. Тег парный, собственных атрибутов у него нет, а вне ruby он ничего не аннотирует. Браузер выводит аннотацию мелким шрифтом над основой.
Сам rt почти ничего не делает: аннотацию над основой выводит браузер, а её размер, цвет и выравнивание меняются обычным CSS. Поэтому вопросы к этому тегу такие: что допустимо внутри него и как ведут себя несколько rt подряд. Сам порядок записи, группа знаков, позиция аннотации и копирование разобраны на странице про ruby.
<ruby>
猫<rt>ねこ</rt>
</ruby>В этой статье
- Тег rt в HTML: что это и где его записывать
- Размер тега rt: почему аннотация вдвое меньше основы и как это изменить
- Оформление тега rt: цвет, вес, регистр и выравнивание аннотации
- Что можно записать внутри тега rt: ссылку, em, lang и title
- Несколько тегов rt подряд и пропуск закрывающего тега
- Частые ошибки с тегом rt
Тег rt в HTML: что это и где его записывать
По описанию спецификации, rt - аннотация для текста, который записан непосредственно перед ним. Родителем может быть только ruby, а внутри допустим любой строчный контент: текст, em, ссылка. Собственных атрибутов у тега нет, только глобальные, а поддерживают его все современные браузеры с 2015 года.
Вне ruby тег ничего не аннотирует: в Chrome он остаётся обычным строчным текстом, и «ねこ» просто выводится в строку после слова. Как основа и аннотация связаны между собой, подробно написано на странице про ruby.
<ruby>猫<rt>ねこ</rt></ruby>
猫<rt>ねこ</rt>Первая запись выводит «ねこ» над знаком, вторая - рядом с ним обычным текстом. Закрывающий тег </rt> можно не писать, если сразу за rt идёт другой rt, rp или заканчивается ruby. Запись с закрывающим тегом яснее, поэтому в примерах он всегда есть, а что достроит парсер, показано в последнем кадре страницы.
Размер тега rt: почему аннотация вдвое меньше основы и как это изменить
По умолчанию Chrome выводит rt вдвое мельче окружающего текста: 10 px при основе 20 px. Для японского чтения это привычно, а над кириллицей аннотация может оказаться слишком мелкой.
Размер меняют свойством font-size. Значения в em и процентах считаются от размера ruby, а не от размера по умолчанию: font-size: 2em у rt при основе 20 px дало 40 px, вдвое больше основы, а 0.6em задаёт аннотацию в 60 % размера основы.
rt {
font-size: 0.6em;
}Аннотация шире основы растягивает слово: у знака 猫 шириной 20 px аннотация «ねこ» в 20 px даёт слово шириной 40 px. Чем крупнее аннотация, тем шире слово и тем сильнее отодвигается соседний текст. Двигайте ползунок в кадре и следите за шириной.
Пример: размер аннотации как доля основы
Двигайте ползунок. Кадр показывает размер аннотации в пикселях и сравнивает ширину слова с аннотацией и без неё.
Оформление тега rt: цвет, вес, регистр и выравнивание аннотации
К rt применяются обычные свойства текста: цвет, жирность, курсив, регистр, межбуквенный интервал. Фон, отступы и рамка у rt тоже работают, но отступы и рамка увеличивают ширину слова. Включайте стили в кадре и смотрите, как меняется ширина.
rt {
color: #5B6270;
font-weight: 600;
text-transform: uppercase;
}Пример: цвет, регистр и отступы у rt
Включайте и выключайте стили. Кадр сравнивает ширину слова со стилями и без них.
Как аннотация выравнивается по основе, задаёт свойство ruby-align у ruby. По умолчанию действует space-around: если аннотация короче основы, её знаки разносятся с равными промежутками, по краям половинные. Значение start прижимает аннотацию к левому краю основы, center выравнивает по центру, а space-between разносит крайние знаки к краям основы.
ruby {
ruby-align: start;
}Пример: выравнивание аннотации
Выбирайте значение. Пунктиром обведена вся запись, кадр показывает, какое значение применил браузер.
Что можно записать внутри тега rt: ссылку, em, lang и title
Внутри rt допустим любой строчный контент. В Chrome em и ссылка остаются в строке аннотации над основой, а ссылка получает цвет ссылки. Так можно привязать аннотацию к странице с пояснением.
Атрибут lang у rt задаёт язык аннотации, если он отличается от языка основы: основа на японском, аннотация по-английски или по-русски. Атрибут title добавляет подсказку при наведении. Оба атрибута глобальные, и Chrome их принимает.
<ruby>
猫<rt lang="en" title="Значение слова">cat</rt>
</ruby>Такая запись подходит для учебных текстов, где над знаком записано не чтение, а перевод: читатель видит короткое слово, а пояснение получает по наведению.
Несколько тегов rt подряд и пропуск закрывающего тега
После одной основы можно записать несколько rt подряд. Они не встают друг над другом вторым слоем, а идут рядом в одной строке над основой. В замере запись 猫<rt>ねこ</rt><rt>cat</rt> вывела аннотации подряд, слово стало шире на ширину второй аннотации, а при копировании получилось «猫ねこcat». Стандарт допускает аннотацию для нуля предшествующих узлов, поэтому второй rt относится к пустой основе и встаёт рядом.
Пустой rt места не занимает: слово остаётся шириной с основу. Так записывают знак, которому аннотация не нужна, когда у соседних знаков она есть.
<ruby>
東<rt>とう</rt>京<rt></rt>
</ruby>Закрывающий тег перед другим rt или rp и в конце ruby парсер достроит сам. Проверьте в кадре, во что превращается короткая запись.
Пример: что достроит парсер
Выберите запись. Кадр показывает вид, вашу разметку и разметку после разбора браузером.
Частые ошибки с тегом rt
Ошибки с этим тегом связаны с местом записи, размером аннотации и тем, что от нескольких rt ждут слоёв.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Аннотация не в ruby: 猫<rt>ねこ</rt> | Вне ruby тег остаётся обычным строчным текстом, аннотации над основой нет | Обернуть основу и аннотацию в ruby |
| Мелкая кириллица в аннотации по умолчанию | Аннотация вдвое мельче основы и может оказаться слишком мелкой | Задать размер: rt { font-size: 0.6em; } |
Размер как от обычного текста: rt { font-size: 2em; } | Значение считается от размера ruby: аннотация вдвое больше основы, слово растягивается | Задавать долю основы: 0.6em или 60% |
Большие отступы и рамка у rt | Слово становится шире, соседний текст отодвигается | Проверить ширину слова и уменьшить отступы |
Второй rt ради второго слоя: 猫<rt>ねこ</rt><rt>cat</rt> | Аннотации идут рядом, а не друг над другом, слово растягивается | Одна аннотация на основу, перевод записать в title |
Блок внутри аннотации: <rt>ね<p>こ</p></rt> | Тег rt допускает только строчный контент, а блок нарушает правила записи | Записать в rt текст, em или ссылку |
