Тег <rb> (от английского ruby base, «основа руби») обозначал основу в ruby: сам знак или слово, над которым выводится пояснение из rt. Например, в записи 漢<rt>kan</rt> основа это знак 漢. Тег парный, но закрывающий </rb> можно опустить: браузер закроет основу сам перед rt, rtc, rp, следующим rb или концом ruby.
В справочнике MDN тег отмечен как устаревший, а в стандарте HTML основа записывается прямо внутри ruby, без отдельной обёртки. Новые страницы с rb писать не нужно.
<ruby>
<rb>漢</rb><rb>字</rb>
<rt>kan</rt><rt>ji</rt>
</ruby>В этой статье
Тег rb в HTML: что это и для чего создавали
У аннотации в японской и китайской письменности две части: основа и пояснение над ней. Пояснение даёт rt, а скобки для старых браузеров добавляет rp. Тег rb предназначался для основы, чтобы её можно было отметить отдельно, особенно когда одно пояснение приходится на несколько знаков.
Внутри rb пишут текст основы. Атрибутов у него нет, кроме глобальных. Родителем может быть только ruby. В DOM это обычный HTMLElement, у него нет собственных свойств, а display по умолчанию inline.
<ruby><rb>漢字</rb><rt>kanji</rt></ruby>Как записывать rb: закрывающий тег можно опустить
Закрывающий тег </rb> необязателен. Когда после основы идёт rt, rtc, rp, другой rb или закрывается сам ruby, браузер завершает основу без подсказки. В DOM после разбора оба варианта записи дают одинаковый результат: у ruby четыре дочерних тега, rb, rb, rt, rt.
<ruby>
<rb>漢<rb>字
<rt>kan<rt>ji
</ruby>Если записать rb вне ruby, браузер тег не удаляет и сохраняет как строчный: ни основы, ни аннотации не получится.
Пример: как браузер разбирает rb
Кнопки меняют запись. Под ней показано число дочерних тегов у ruby и display у rb.
Как работает rb: над какими знаками располагается аннотация
Тег rb почти ничего не меняет в отрисовке. Аннотация располагается над основой так же, как если бы основа была просто текстом внутри ruby. Если подряд идут две основы rb и две аннотации rt, в Firefox первая аннотация окажется над первой основой, а вторая над второй. В других браузерах так не получится: первая rt растягивается над обоими знаками, а вторая оказывается справа от слова без основы. Поэтому полагаться на rb нельзя.
Чтобы у каждого знака была своя аннотация, основу и аннотацию записывают парами: знак, затем rt, потом следующий знак и его rt. Для аннотации ко всему слову достаточно написать слово и одну rt: rb здесь ничего не меняет.
<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>Пример: положение аннотаций с rb и без rb
Кнопки меняют запись. Вердикт считается по ширине первой аннотации и одного знака.
Оформление rb
Как у любого строчного тега, у rb работают color, font-size и background. Размер шрифта основы меняет её ширину, а размер аннотации остаётся прежним: font-size у rt нужно задавать отдельно.
rb { color: crimson; font-size: 36px; }Кнопки включают стили для rb. Ширина основы и размер шрифта rt читаются из страницы после каждого нажатия.
Какие браузеры понимают rb
Версии взяты из базы совместимости MDN. Тег устарел, а полностью его поддерживает только Firefox.
Пример: таблица версий
| Браузер | С какой версии | Заметка |
|---|---|---|
| Chrome | 5 | тег разбирается, но отрисовка не такая, как ожидается (частичная) |
| Edge | 79 | тот же результат на том же движке |
| Firefox | 38 | работает полностью |
| Safari | 5 | тег разбирается, отрисовка частичная |
Чем заменить rb
Заменять его не нужно, достаточно убрать: основа пишется прямо внутри ruby, а пояснение пишут после неё в rt. Если слово длинное и пояснения нужны каждому знаку, записывайте пары «знак и его rt». Для старых браузеров, которые не знают ruby, добавляйте rp со скобками.
<ruby>
漢<rp>(</rp><rt>kan</rt><rp>)</rp>
字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>Текст такой записи в textContent получается «漢(kan)字(ji)», а innerText без скобок «漢kan字ji».
Частые ошибки с тегом rb
Почти все ошибки с rb от ожидания, что rb привязывает аннотацию к своей основе.
| Ошибка | Что получится | Как исправить |
|---|---|---|
Две rb и две rt подряд, чтобы дать каждому знаку свою аннотацию | В большинстве браузеров первая аннотация растягивается над обоими знаками, вторая остаётся справа без основы | Записать пары: знак, его rt, следующий знак, его rt |
rb вне ruby | Обычный строчный тег, аннотации нет | Обернуть в ruby или убрать |
Ожидание, что rb задаёт размер аннотации | Размер аннотации остаётся прежним | Отдельное правило для rt |
rb в новых страницах | Валидатор HTML показывает ошибку: тег устарел | Писать основу прямо внутри ruby |
Атрибуты у rb (кроме глобальных) | Ничего не меняется | Убрать или использовать class и стили |
