<ruby>

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

Синтаксис тега <ruby>

<ruby>
  漢<rp>(</rp><rt>かん</rt><rp>)</rp>
  字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

Спецификация HTML

Тег <ruby> является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Добавление руби над кандзи 漢字, которое показывает их произношение かんじ на японском языке:

<p>Представленный текст написан на японском языке с использованием <ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>, которые представляют собой китайские иероглифы.</p>

Добавление руби над кандзи 猫, которое показывает их произношение ねこ на японском языке:

<p>Этот текст содержит <ruby>猫<rp>(</rp><rt>ねこ</rt><rp>)</rp></ruby>, что означает "кошка" на японском языке.</p>

Для чего использовать тег <ruby>

• Для добавления аннотации к японским символам в веб-манге.
• Для добавления аннотации к китайским символам в онлайн-курсах китайского языка.
• Для добавления аннотации к японским и китайским символам на сайтах, посвященных истории и культуре этих стран.
• Для добавления аннотации к японским и китайским символам в онлайн-словарях.
• Для добавления аннотации к японским и китайским символам в учебных материалах на языках, отличных от японского и китайского.
• Для добавления аннотации к японским и китайским символам в медицинских отчетах, исследованиях и статьях.

Атрибуты тега <ruby>

У тега <ruby> нет специфических атрибутов.

Глобальные атрибуты

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

Нюансы

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

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

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

Поддержка тега <ruby> достаточно ограничена, его не рекомендуется использовать в качестве основного метода отображения фонетической транскрипции или перевода на другой язык. Актуальная информация — на сaniuse.

Альтернативные теги

Тег <ruby> не имеет прямых альтернатив в HTML, однако, вместо использования данного тега, можно применять комбинацию тегов <span> и <sup> для добавления аннотаций.

Чем заменить этот тег

Если браузер не поддерживает тег <ruby>, он проигнорирует его и отобразит текст без аннотаций. В этом случае можно использовать альтернативные методы, например, изображения с аннотациями или комбинацию тегов <span> и <sup>.

Актуальность

Тег <ruby> является актуальным и используется в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.