HTML тег <ruby>
Тег <ruby> задаёт фонетические подсказки в японских и восточноазиатских языках. Описание тега, атрибуты и примеры использования.
HTML тег <ruby> определяет аннотацию руби — небольшой фрагмент текста, отображаемый рядом (обычно над) базовым текстом для указания его произношения или значения. Аннотации руби широко распространены в восточноазиатской типографике: например, они показывают фонетическое чтение китайского или японского иероглифа, чтобы читатель, незнакомый с иероглифом, мог его произнести.
Тег <ruby> является одним из элементов HTML5.
Как совместно работают <ruby>, <rt> и <rp>
Аннотация руби создаётся из небольшой группы элементов, действующих как единое целое:
<ruby>— контейнер. Базовый текст (аннотируемые символы) располагается непосредственно внутри него.<rt>(ruby text) содержит аннотацию — чтение или примечание, отображаемое над базовым текстом.<rp>(ruby parenthesis) — необязательный резервный элемент. Современные браузеры скрывают его содержимое, а браузеры без поддержки руби отображают его, заключая аннотацию в скобки, чтобы страница оставалась читаемой.
Полная аннотация выглядит так:
<ruby>base<rp>(</rp><rt>reading</rt><rp>)</rp></ruby>В поддерживающем браузере reading отображается над base. В браузере без поддержки руби используется встроенная форма base(reading) — именно поэтому скобки <rp> важны: без них аннотация слилась бы с базовым текстом в виде basereading.
Примечание: В более старых примерах базовый текст может быть обёрнут элементом
<rb>(ruby base).<rb>устарел — в современном HTML базовый текст размещается непосредственно внутри<ruby>без дополнительной обёртки. Не используйте его в новой разметке.
Синтаксис
Тег <ruby> используется парами. Базовый текст и его аннотации <rt>/<rp> записываются между открывающим (<ruby>) и закрывающим (</ruby>) тегами.
Пример: японская фуригана
В японском языке фуригана — это небольшие символы хираганы, печатаемые над кандзи, чтобы показать, как читается этот кандзи. Элемент <ruby> является стандартным способом разметки фуриганы в вебе. В данном примере кандзи 明日 (означающий «завтра») аннотируется своим чтением Ashita:
HTML тег <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
</body>
</html>Результат
Аннотирование каждого символа отдельно
Внутри одного элемента <ruby> можно разместить несколько пар «базовый символ / <rt>». Каждый базовый символ аннотируется своим чтением, а аннотации выравниваются над соответствующими символами:
<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>Это удобно, когда многосимвольное слово читается по-разному для каждого символа. Та же структура подходит для китайского пиньиня (произношение латинскими буквами, например 北京 как Běi / jīng) и для бопомофо / чжуинь, где фонетические символы размещаются рядом с базовыми символами.
Оформление руби с помощью CSS
Тег <ruby> поддерживает Глобальные атрибуты и Атрибуты событий. Он не имеет специфических атрибутов — внешний вид управляется через CSS.
Цвет базового текста и текста аннотации можно задавать независимо, используя селекторы ruby и rt:
ruby {
color: blue;
}
rt {
color: red;
}Для разметки руби существуют два специальных CSS-свойства:
ruby-positionуправляет положением аннотации относительно базового текста. Распространённые значения:over(над базовым текстом — значение по умолчанию для большинства письменностей),under(под ним; иногда используется для бопомофо или чтобы сохранить равномерную высоту строки) иalternate.ruby-alignуправляет распределением аннотации и базового текста, когда они различаются по длине, напримерstart,centerилиspace-between.
ruby {
ruby-position: under;
ruby-align: center;
}Поддержка браузерами: Элементы
<ruby>,<rt>и<rp>хорошо поддерживаются во всех современных браузерах. Свойствоruby-positionтакже широко поддерживается, тогда какruby-alignимеет более ограниченную поддержку — проверяйте его работу перед использованием и сохраняйте запасной элемент<rp>, чтобы смысл текста сохранялся даже там, где оформление руби реализовано не полностью.