Тег <rtc> (от английского ruby text container, «контейнер текста руби») должен был собирать вторую, смысловую аннотацию в ruby: например, перевод слова рядом с произношением из rt. Его пишут внутри ruby после основы. Тег парный, но закрывающий </rtc> можно опустить: браузер закроет его сам перед rb, rt, следующим rtc или концом ruby.
В справочнике MDN тег отмечен как устаревший, а в стандарте HTML rtc и rb названы полностью устаревшими. Кроме того, в некоторых браузерах rtc рисуется не как аннотация, а как обычный текст в строке справа от слова. Новые страницы с rtc писать не нужно.
<ruby>
漢字
<rt>kanji</rt>
<rtc>Chinese characters</rtc>
</ruby>В этой статье
Тег rtc в HTML: что это и для чего создавали
У слова с аннотацией бывает два вида пояснений: как читать (произношение) и что значит (перевод или толкование). Первое записывает rt, а второе должен был собирать rtc. Скобки для браузеров, которые не знают ruby, добавляет rp.
Внутри rtc допустим обычный текст или несколько rt. Родитель только ruby. Атрибутов у тега нет, кроме глобальных, в DOM это обычный HTMLElement. В старых черновиках рядом с ним был ещё rbc, контейнер для основ, но в браузерах он не распознаётся.
<ruby>
馬<rt>mǎ</rt>
<rtc lang="en">Horse</rtc>
</ruby>Как записывать rtc: закрывающий тег можно опустить
Закрывающий тег </rtc> необязателен. Когда после контейнера идёт rb, rt, другой rtc или закрывается сам ruby, браузер завершает контейнер без подсказки. В DOM обе записи дают одинаковый результат: у ruby два дочерних тега rtc.
<ruby>
漢字
<rtc>Chinese
<rtc>English
</ruby>Если записать rtc вне ruby, браузер тег сохраняет как строчный. Если записать rt внутри rtc, в некоторых браузерах она теряет роль аннотации: её display становится inline.
Пример: как браузер разбирает rtc
Кнопки меняют запись. Под ней показаны дочерние теги и display читаются из страницы после каждого нажатия.
Как рисуется rtc: рядом с основой, а не над ней
По замыслу rtc должен стать второй строкой аннотаций: над основой или под ней, смотря на значение ruby-position. В некоторых браузерах этого не происходит. Для rtc там действует display: inline, и его текст идёт в обычной строке сразу после основы. Слово становится шире на ширину этого текста, а rt остаётся над основой, как и раньше.
В таких браузерах свойство ruby-position: under, записанное на rtc, ничего не меняет. Если в записи нет rt, а есть только rtc, результат тот же: текст идёт справа от основы. Вторая rt рядом с первой тоже не получает своей основы, она просто занимает место справа.
rtc { ruby-position: under; }Пример: где рисуется rtc
Кнопки меняют запись. Вердикт считается по положению rtc относительно основы 漢字.
Рассчитывать на вторую строку аннотаций нельзя.
Какие браузеры понимают rtc
Версии взяты из базы совместимости MDN: в ней тег отмечен как устаревший. База говорит лишь о том, с какой версии браузер знает тег, а не о том, что он рисует вторую строку аннотаций.
Пример: таблица версий
| Браузер | С какой версии | Заметка |
|---|---|---|
| Chrome | 47 | тег разбирается, но второй строки аннотаций нет: текст идёт в строке справа от основы |
| Edge | 79 | тот же результат на том же движке |
| Firefox | 33 | тег известен браузеру |
| Safari | 8 | тег известен браузеру |
Чем заменить rtc
Стандарт HTML предлагает вложенные ruby: внутренняя ruby даёт первую аннотацию, внешняя добавляет вторую. Обе аннотации рисуются над основой одна над другой, поэтому такая запись работает там, где rtc нет.
<ruby>
<ruby>漢字<rt>kanji</rt></ruby>
<rt>Chinese characters</rt>
</ruby>Пример: вложенные ruby вместо rtc
Кнопки сравнивают вложенные ruby, одну ruby и запись с rtc. Положение аннотаций считается относительно основы.
Если вторая аннотация нужна как подсказка, а не как часть слова, проще вынести её в атрибут title у ruby или записать обычным текстом рядом. Для старых браузеров, которые не знают ruby, добавляйте rp со скобками.
Частые ошибки с тегом rtc
Почти все ошибки с rtc от ожидания, что rtc нарисует вторую строку аннотаций.
| Ошибка | Что получится | Как исправить |
|---|---|---|
rtc для перевода под словом | В некоторых браузерах текст идёт в строке справа от основы, а не под ней | Вложенные ruby или обычный текст рядом |
ruby-position: under на rtc | В некоторых браузерах ничего не меняется | Не рассчитывать на положение второй строки |
rt внутри rtc | В некоторых браузерах rt становится обычным строчным текстом | Вложенный ruby с собственной rt |
rtc вне ruby | Обычный строчный тег, аннотации нет | Обернуть в ruby или убрать |
rbc как контейнер основ | Браузер не знает такого тега | Основа прямо внутри ruby |
rtc в новых страницах | Валидатор HTML показывает ошибку: тег устарел | Основа и rt внутри ruby, вторая аннотация во вложенном ruby |
