Атрибут class тега <rt>
Описание
Атрибут class для тега <rt> позволяет назначать CSS-классы для стилизации ruby-аннотаций (фонетических подсказок) в восточноазиатских языках. Этот элемент используется внутри <ruby> контейнера.
<ruby>
漢字 <rt class="pronunciation">かんじ</rt>
</ruby>
Основные возможности стилизации:
| Свойство CSS | Описание | Пример |
|---|---|---|
font-size |
Размер шрифта аннотации | font-size: 0.5em; |
color |
Цвет текста | color: #c62828; |
position |
Позиционирование аннотации | position: relative; top: -0.5em; |
text-align |
Выравнивание текста | text-align: center; |
Пример с CSS-стилизацией:
<style>
.kanji-reading {
font-size: 0.6em;
color: #d32f2f;
font-weight: bold;
}
.hiragana-guide {
background-color: #fff9c4;
padding: 0 3px;
border-radius: 3px;
}
</style>
<ruby>
日本語 <rt class="kanji-reading hiragana-guide">にほんご</rt>
</ruby>
Рекомендации:
- Используйте семантичные имена классов (например, "kanji-reading")
- Сохраняйте читаемость аннотаций при стилизации
- Для вертикального текста используйте
writing-mode: vertical-rl - Тестируйте отображение на разных устройствах
Пример с вертикальной разметкой:
<style>
.vertical-ruby {
writing-mode: vertical-rl;
}
.vertical-rt {
font-size: 0.7em;
margin-left: 0.2em;
}
</style>
<ruby class="vertical-ruby">
漢 <rt class="vertical-rt">かん</rt>
字 <rt class="vertical-rt">じ</rt>
</ruby>
Примечание: Хотя современные браузеры хорошо поддерживают ruby-разметку, для сложных случаев рассмотрите использование CSS-псевдоэлементов или специализированных библиотек для восточноазиатской типографики.
Пример с анимацией:
<style>
.highlight-rt {
transition: all 0.3s ease;
}
.highlight-rt:hover {
background-color: #ffeb3b;
transform: scale(1.1);
}
</style>
<ruby>
東京 <rt class="highlight-rt">とうきょう</rt>
</ruby>