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

Описание

Атрибут class позволяет назначать один или несколько классов элементу <ruby> для стилизации через CSS или взаимодействия через JavaScript. Классы могут использоваться многократно на странице.

Пример использования:
<ruby class="kanji-reading"> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> </ruby> <style> .kanji-reading { font-size: 1.2em; color: #333; } </style>

Особенности работы:

Характеристика Описание
Множественные классы Можно указать несколько классов через пробел: class="class1 class2"
Наследование Стили применяются ко всем вложенным элементам ruby-структуры
Специфичность Селекторы класса имеют вес 0-1-0 в CSS-специфичности

Пример с несколькими классами:

<ruby class="kanji japanese"> 水 <rp>(</rp><rt>みず</rt><rp>)</rp> </ruby> <style> .kanji { font-family: "MS Mincho", serif; } .japanese { color: #d33; } </style>

Рекомендации по именованию:

  • Используйте осмысленные имена, отражающие назначение
  • Придерживайтесь единого стиля именования (BEM, kebab-case и др.)
  • Избегайте избыточных префиксов (например, "ruby-")
  • Для ruby-аннотаций полезны классы типа: reading, pronunciation, annotation

Пример с BEM-нотацией:

<ruby class="text__ruby text__ruby--japanese"> 日本語 <rp>(</rp><rt>にほんご</rt><rp>)</rp> </ruby>

Ограничения:

  • Не гарантирует уникальность (в отличие от id)
  • Избыточное количество классов усложняет поддержку
  • Длинные имена классов увеличивают размер HTML-документа

Примечание: Для элементов <ruby> классы особенно полезны для:

  • Стилизации разных типов чтений (онные/кунные)
  • Различения языков (японский/китайский/корейский)
  • Адаптивного отображения ruby-разметки на разных устройствах