Тег <ruby>
Описание
Тег <ruby> используется для добавления фонетических аннотаций (руби-текста) к основному тексту, преимущественно в восточноазиатских языках (японском, китайском, корейском). Создает семантическую связь между базовым текстом и его пояснением.
<ruby>
漢字 <rt>かんじ</rt>
</ruby>
Ключевые особенности:
- Контейнер для ruby-разметки (базовый текст + аннотация)
- Поддерживает вложенные
<rb>,<rt>,<rp>,<rtc> - По умолчанию аннотация отображается мелким шрифтом сверху
- Позиционирование можно изменить через CSS (ruby-position)
- Полная поддержка в современных браузерах
<!-- Японский пример (фуригана) -->
<ruby>
日本語 <rt>にほんご</rt>
</ruby>
<!-- Китайский пример (пиньинь) -->
<ruby>
北京 <rt>Běijīng</rt>
</ruby>
<!-- Сложный пример с группировкой -->
<ruby>
<rb>漢</rb><rt>かん</rt>
<rb>字</rb><rt>じ</rt>
</ruby>
<!-- С fallback для старых браузеров -->
<ruby>
漢字 <rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>
Стилизация через CSS:
<style>
ruby {
font-size: 24px;
ruby-position: under; /* over (по умолчанию) или under */
}
rt {
font-size: 0.5em;
color: #e74c3c;
}
rp {
display: none; /* Скрываем скобки в современных браузерах */
}
</style>
<ruby>
東京 <rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>
Рекомендации по использованию:
- Используйте для восточноазиатских языков и лингвистических целей
- Всегда добавляйте
<rp>для совместимости - Для сложных иероглифов применяйте группировку с
<rb> - Тестируйте отображение на разных устройствах
- Не используйте для обычных надстрочных/подстрочных индексов
Тег <ruby> предоставляет стандартизированный способ добавления фонетических аннотаций, критически важный для правильного отображения и изучения восточноазиатских письменностей в вебе.
Атрибуты
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| contenteditable | Разрешает редактирование содержимого |
| data-* | Пользовательские данные элемента |
| dir | Направление текста (ltr|rtl) |
| hidden | Скрывает элемент от отображения |
| id | Уникальный идентификатор элемента |
| lang | Язык содержимого элемента |
| spellcheck | Включает проверку орфографии |
| style | Инлайновые CSS-стили элемента |
| tabindex | Порядок перехода при навигации по Tab |
| title | Всплывающая подсказка для элемента |
| translate | Определяет возможность перевода содержимого |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 5.5 | 5.0 | 15.0 | 38.0 | 5.0 |