Тег <ruby>

Синтаксис

<ruby>
    <rp>...</rp>
    <rt>...</rt>
    <rp>...</rp>
</ruby>

Описание

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

В HTML-документе присутствуют теги <ruby>, <rt> и <rp>, которые используются для добавления фуриган (фонетические подсказки в восточно-азиатских языках, их также называют — руби или ёмигана).

Фуриганы, как правило, отображаются мелким шрифтом над иероглифами (основным текстом) и содержат подсказки по их произношению и переводу. В контейнере <ruby> полезный текст фуриганы обозначается тегом <rt>. А тег <rp> является необязательным и определяет альтернативный текст для браузеров, которые не поддерживают тег <ruby>.

Внимание!

Если используется контейнер <rp>, то тег <rt> должен быть между двумя данными контейнерами.

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

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег ruby</title>
</head>
<body>
    <ruby>
        漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
        字 <rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
</body>
</html>

Отображение в браузере:

漢 (Kan) 字 (ji)

Параметры CSS по умолчанию

ruby {
    text-indent: 0px;
}

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

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge

<ruby> Да Да Да Да Да