W3docs

HTML тег <rtc>

Элемент HTML <rtc> устарел и удалён из спецификации. Узнайте, почему, и как использовать современную разметку ruby с <ruby>, <rt> и <rp>.

HTML-элемент <rtc> (Ruby Text Container) группировал один или несколько элементов <rt>, чтобы прикрепить второй уровень аннотаций — например перевод или альтернативное прочтение — к базовому тексту ruby внутри контейнера <ruby>.

Важно: <rtc> является устаревшим. Он был удалён из живого стандарта HTML вместе с элементами <rbc> и <rb>. Современные браузеры больше не поддерживают модель «complex ruby», частью которой он являлся, и могут игнорировать тег или отображать его непредсказуемо. Не используйте <rtc> на новых страницах. Эта страница содержит историческую справку и демонстрирует современную замену.

Почему он был удалён

<rtc> входил в состав более старой и сложной модели ruby, которая также опиралась на <rbc> (контейнер базы ruby) и <rb> (база ruby). Эта модель позволяла авторам накладывать два уровня аннотаций — например фонетическое чтение и перевод — над одной базой. На практике она реализовывалась непоследовательно в разных браузерах и была трудна в использовании, поэтому спецификация была упрощена. Сегодня элементы <ruby>, <rt> и <rp> (в сочетании с небольшим количеством CSS) охватывают все важные случаи использования.

Современная замена

Для стандартной восточноазиатской разметки ruby — базового символа с направляющим чтения над ним — достаточно только <ruby>, <rt> для аннотации и <rp> в качестве запасного варианта для браузеров без поддержки ruby.

Пример: ruby без <rtc>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ruby>
      旧<rp>(</rp><rt>jiù</rt><rp>)</rp>
      金<rp>(</rp><rt>jīn</rt><rp>)</rp>
      山<rp>(</rp><rt>shān</rt><rp>)</rp>
    </ruby>
  </body>
</html>

Скобки <rp> скрыты браузерами с поддержкой ruby и отображаются как простой текст браузерами без неё — так что 旧(jiù)金(jīn)山(shān) остаётся читаемым везде.

Управление ruby с помощью CSS

Вы можете настроить положение аннотации и её выравнивание с помощью CSS вместо дополнительных элементов-контейнеров:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ruby {
        ruby-position: over;   /* place reading above the base (under, inter-character, alternate also valid) */
        ruby-align: center;    /* distribute the annotation: start, center, space-between, space-around */
      }
    </style>
  </head>
  <body>
    <ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>
  </body>
</html>

Если вам действительно нужен второй уровень аннотаций (сценарий использования, для которого предназначался <rtc>), наиболее надёжным подходом сегодня является использование двух вложенных элементов <ruby> или стилизация с помощью ruby-position, поскольку модель complex-ruby больше не является интероперабельной.

Путь миграции

Для обновления устаревшей разметки с использованием <rtc>:

  1. Удалите обёртку <rbc> и поместите базовые символы непосредственно внутрь <ruby>.
  2. Оставьте каждый <rt> сразу после базы, к которой он относится.
  3. Уберите группировку <rtc>; если вы использовали его для слоя перевода, перенесите этот текст в отдельный элемент или во второй <ruby>.
  4. Добавьте резервные скобки <rp> для браузеров без поддержки ruby.

Поддержка браузерами

<rtc> был удалён из спецификации и не является частью современной поддержки ruby. Считайте его неподдерживаемым в новых проектах. Замещающие элементы имеют надёжную поддержку:

ЭлементПоддержка
<ruby>Все современные браузеры
<rt>Все современные браузеры
<rp>Все современные браузеры
<rtc>Устарел — удалён, не используйте

Свойства CSS ruby-position и ruby-align поддерживаются в актуальных версиях Chrome, Edge, Firefox и Safari (поведение для некоторых значений ruby-align в разных браузерах пока различается).

Связанные элементы

  • <ruby> — контейнер аннотации ruby
  • <rt> — текст ruby (произношение/аннотация)
  • <rp> — резервные скобки для браузеров без поддержки ruby

<rtc> ранее поддерживал глобальные атрибуты и атрибуты событий.

Практика

Практика
Каков текущий статус HTML-элемента rtc?
Каков текущий статус HTML-элемента rtc?
Was this page helpful?