HTML-тег <rt>

HTML-тег <rt> используется для определения текста Ruby в элементе <ruby> . Ruby-текст предоставляет руководства по произношению или аннотации для восточноазиатских иероглифов, таких как китайские, японские или корейские. Тег <rt> используется в сочетании с тегом <ruby> и, опционально, с тегом <rp> .

Тег <rt> специально разработан для отображения произношения или транслитерации базового текста, обычно отображаемого над или рядом с основным содержимым.

Базовый синтаксис HTML-тега <rt>

Тег <rt> всегда вложен в элемент <ruby> , как показано ниже: 

<ruby>
    Base Text
    <rt>Ruby Text</rt>
</ruby>

Тег <rt> содержит аннотацию Ruby для базового текста, определенного в элементе <ruby> .

Пример использования тега <rt>

Вот пример того, как тег <rt> используется для добавления руководства по произношению китайских иероглифов: 

<!DOCTYPE html>
<html>
    <body>
        <h2>Ruby Annotation Example</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Пример использования тега rt

Пояснение: В этом примере базовый текст «漢字» аннотирован с произношением «kanji». Браузеры, поддерживающие теги <ruby> и <rt> отображают аннотацию над или рядом с базовым текстом.

Атрибуты HTML-тега <rt>

  • Нет определенных атрибутов: Тег <rt> не имеет никаких определенных атрибутов.
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Вы можете использовать глобальные атрибуты для стилизации или управления тегом <rt> с помощью CSS или JavaScript.

Стилизация тега <rt> с помощью CSS

Тег <rt> можно стилизовать для настройки внешнего вида аннотации Ruby, например, изменяя его размер, цвет или положение: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            rt {
                font-size: 0.8em;
                color: #007BFF;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Styled Ruby Annotation</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Оформление тега rt с помощью CSS

Результат: текст аннотации Ruby(«кандзи») выделен синим цветом, курсивом и немного меньше основного текста.

Преимущества доступности тега <rt>

Тег <rt> улучшает доступность, предоставляя дополнительную информацию о сложных символах или словах. Программы чтения с экрана могут распознавать и озвучивать текст, написанный на языке Ruby, помогая пользователям понять содержание.

Практическое применение тега <rt>

  • Изучение языка: предоставление руководств по произношению восточноазиатских иероглифов в помощь учащимся.
  • Доступность: помогите читателям понять сложные или незнакомые слова с помощью аннотаций.
  • Улучшение типографики: добавление дополнительных деталей или акцентов к символам в языках, требующих использования рубинового текста.
  • Поддержка нескольких языков: отображение переводов или объяснений наряду с текстом на родном языке.