HTML-тег <ruby>

HTML-тег <ruby> используется для отображения руби-аннотаций — небольших текстовых фрагментов, обычно используемых для указания произношения или предоставления дополнительной информации об исходном тексте. Этот тег особенно полезен для восточноазиатских языков, таких как японский, китайский и корейский, где часто требуются руководства по произношению(также известные как «фуригана» или «пиньинь»).

Элемент <ruby> работает в сочетании с тегами <rt> (текст Ruby) и, опционально, с тегами <rp> (скобки Ruby) для определения аннотации и резервного содержимого для неподдерживаемых браузеров.

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

Базовая структура тега <ruby> : 

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

Base Text — это основное содержимое, а тег <rt> содержит текст аннотации или произношения.

Пример аннотаций Ruby

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

<!DOCTYPE html>
<html>
    <body>
        <h2>Ruby Annotation Example</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Пример аннотаций Ruby

Пояснение: Базовый текст «漢字» отображается с рубиновым текстом «kanji», расположенным над ним(или рядом) в зависимости от рендеринга браузера.

Использование <rp> для резервной поддержки

Тег <rp> предоставляет резервный контент для браузеров, не поддерживающих элемент <ruby> . Обычно используются скобки: 

<ruby>
    漢字
    <rp>(</rp>
    <rt>kanji</rt>
    <rp>)</rp>
</ruby>

Результат: В поддерживаемых браузерах отображается текст «kanji» на языке Ruby. В неподдерживаемых браузерах текст отображается как «漢字(kanji)».

Стилизация текста Ruby с помощью CSS

Вы можете стилизовать текст Ruby с помощью CSS, чтобы настроить его внешний вид, например размер шрифта, цвет или позиционирование: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            ruby {
                font-size: 1.2em;
            }
            rt {
                font-size: 0.8em;
                color: #007BFF;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Styled Ruby Example</h2>
        <p>
            <ruby>
                漢字
                <rt>kanji</rt>
            </ruby>
        </p>
    </body>
</html>
Стилизация текста Ruby с помощью CSS

Результат: базовый текст(«漢字») отображается шрифтом большего размера, а рубиновый текст(«кандзи») отображается шрифтом меньшего размера и курсивом синего цвета.

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

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

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

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