Тег ruby добавляет мелкую аннотацию над словом или знаком: чаще всего это чтение иероглифа. Название взято из типографики, где «рубином» называли самый мелкий шрифт. Внутри тега записывают основу, а сразу за ней - аннотацию в теге rt. Необязательный тег rp хранит запасной вариант в скобках. Браузер выводит аннотацию над основой мелким шрифтом.
Чаще всего ruby встречается в японских текстах, но привязан он не к языку, а к задаче: над словом можно добавить чтение, произношение или короткое пояснение, в том числе для русского слова. Есть и неожиданная сторона: аннотация попадает в копию вместе с основой, поэтому о ней стоит знать заранее. Вместе с ruby работают теги rt и rp .
<p><ruby>猫<rt>ねこ</rt></ruby> спит на диване.</p>В этой статье
- Тег ruby в HTML: что это и как записать аннотацию
- Тег ruby для группы знаков и для каждого знака отдельно
- Тег ruby для кириллицы и латиницы: когда он нужен, а когда лучше abbr
- Оформление тега ruby: позиция аннотации, межстрочный интервал и ширина слова
- Копирование и поиск текста с тегом ruby: что попадёт в выделение
- Частые ошибки с тегом ruby
Тег ruby в HTML: что это и как записать аннотацию
Спецификация HTML описывает ruby как основной текст вместе с соответствием его частей аннотациям. Справка MDN добавляет, что аннотация может стоять над основой, под ней или сбоку, а сам тег нужен прежде всего для чтения знаков восточных языков.
Запись всегда идёт в одном порядке: основа, затем аннотация в rt. Каждый rt относится к основе, которая записана перед ним. По умолчанию Chrome выводит ruby как особый вид элемента (display: ruby), а rt - как display: ruby-text размером вдвое меньше основы: 8 px при основе 16 px.
Тег rp скрыт (display: none). Он нужен на случай, если браузер не знает тег ruby: тогда аннотация окажется в скобках рядом с основой. По данным MDN, тег поддерживают все современные браузеры с 2015 года, но запись со скобками остаётся безопасной.
<ruby>
猫<rp>(</rp><rt>ねこ</rt><rp>)</rp>
</ruby>Тег ruby для группы знаков и для каждого знака отдельно
Слово из нескольких знаков подписывают двумя способами. Группой: одна аннотация на всю основу. По знакам: своя аннотация над каждым знаком.
<ruby>東京<rt>とうきょう</rt></ruby>
<ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>По знакам точнее: читатель видит, какая часть чтения относится к какому знаку. Группой записывают слово, чтение которого не делится по знакам. У слова 今日 («сегодня») чтение «きょう» относится ко всему слову, и разбить его на части нельзя.
Проверьте оба способа в кадре. Кадр разбирает разметку и для каждого rt указывает основу, к которой он относится.
Пример: аннотация для группы знаков и для каждого знака
Выберите слово и способ записи. Кадр показывает вид, разметку и разбор: какая аннотация к какой основе относится.
Тег ruby для кириллицы и латиницы: когда он нужен, а когда лучше abbr
Тег ruby не привязан к иероглифам: аннотацию можно записать над латиницей или кириллицей. Так подписывают транскрипцию, например пиньинь над китайскими знаками, или пояснение к слову в учебном тексте.
<p><ruby>你好<rt>nǐ hǎo</rt></ruby> и
<ruby>HTML<rt>язык разметки</rt></ruby></p>У этого способа есть цена: аннотация видна всегда, растягивает слово и делает строку выше. Когда нужна короткая расшифровка сокращения, которую читатель посмотрит по желанию, лучше подходит abbr с атрибутом title: он не меняет ни ширину слова, ни высоту строки.
| Способ | Когда виден читателю | Что меняется в строке |
|---|---|---|
ruby | Сразу, над словом | Слово шире, строка выше |
abbr с title | По наведению | Размеры не меняются, добавляется пунктир |
| Пояснение в скобках | Сразу, в строке | Строка становится длиннее |
Выбор простой: ruby подходит, когда аннотацию нужно видеть сразу, например произношение или транскрипцию. Для расшифровки сокращения достаточно abbr.
Оформление тега ruby: позиция аннотации, межстрочный интервал и ширина слова
По умолчанию аннотация выводится над основой. Положением управляет свойство ruby-position: значение under выводит аннотацию под основой. В вертикальном тексте (writing-mode: vertical-rl) аннотация оказывается справа от основы. Значения alternate и inter-character Chrome не принял, это проверено измерением.
ruby {
ruby-position: under;
}Пример: положение аннотации и направление письма
Переключайте положение и направление. Кадр измеряет, где на самом деле оказалась аннотация относительно основы.
Аннотация занимает место. Если она шире основы, слово растягивается по ширине. Если межстрочный интервал мал, вырастает высота строки: чем интервал больше, тем меньше разница, а при достаточном запасе строка с аннотацией не выше обычной. Поэтому в абзацах с ruby интервал задают с запасом.
p {
line-height: 2;
}Ширину определяет более широкий из двух: если аннотация длиннее основы, соседний текст отодвигается. Размер самой аннотации меняют свойством font-size у rt, об этом подробно написано на странице про rt.
Пример: межстрочный интервал и ширина слова
Двигайте ползунок и выбирайте длину аннотации. Кадр сравнивает строку без аннотации со строкой с аннотацией и меряет ширину знака.
Копирование и поиск текста с тегом ruby: что попадёт в выделение
При копировании основа и аннотации идут подряд, без пробелов и пометок: запись 図<rt>と</rt>書<rt>しょ</rt>館<rt>かん</rt> даёт текст «図と書しょ館かん». Слово «図書館» в таком тексте уже не найти: между знаками стоят аннотации. Это важно для скриптов, которые ищут слово в тексте страницы, и для читателя, который записывает копию в другое место.
Текст тега rp в выделение не попадает, хотя в свойстве textContent он есть: у записи со скобками textContent вернёт «図(と)書(しょ)館(かん)», а выделение - «図と書しょ館かん». Кадр ниже показывает оба значения.
Убрать аннотации из копии через CSS ненадёжно: в Chrome свойство user-select: none у rt дало неполный результат, часть аннотаций осталась в выделении. Поэтому не рассчитывайте на него и проверяйте копию.
Пример: что попадёт в копию
Переключайте запись. Кадр выделяет слово так же, как при копировании, и сравнивает выделение с textContent.
Частые ошибки с тегом ruby
Ошибки с этим тегом связаны с порядком записи, скобками и местом, которое занимает аннотация.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Аннотация вне ruby: 猫<rt>ねこ</rt> | Тег rt без ruby работает как обычный строчный текст: «ねこ» выводится в строку, а не над основой | Обернуть основу и аннотацию в ruby |
Аннотация раньше основы: <ruby><rt>ねこ</rt>猫</ruby> | Аннотация относится к основе перед ней, а здесь её нет; при копировании аннотация оказывается раньше основы | Сначала основа, потом rt |
Скобки обычным текстом: <ruby>猫(ねこ)</ruby> | Скобки видны всегда, а аннотации над основой нет | Записать rt и, если нужно, rp со скобками |
Длинное пояснение: <rt>язык гипертекстовой разметки</rt> | Аннотация растягивает слово, соседний текст отодвигается | Короткая аннотация или abbr с title |
ruby ради вида: <ruby>Новинка<rt>NEW</rt></ruby> | Тег сообщает, что это чтение или пояснение к основе, а не метка | span с классом и стилями |
Тесный line-height в абзаце с аннотациями | Строка с аннотацией выше остальных, и интервалы в абзаце получаются неровными | Увеличить интервал, например line-height: 2 и больше |
| Расчёт на чистую копию текста | В копию попадает «図と書しょ館かん», и слово 図書館 в ней не находится | Проверить копию и учитывать аннотации при поиске |
