Атрибут data-* тега <ruby>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <ruby>, не видимую пользователю, но доступную для JavaScript и CSS. Эти атрибуты особенно полезны для хранения метаданных о чтениях иероглифов.
<ruby data-reading-type="onyomi" data-language="ja">
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
Синтаксис:
| Паттерн | Пример |
|---|---|
data-префикс |
data-reading |
data-префикс-суффикс |
data-reading-type |
Пример доступа через JavaScript:
<ruby id="kanji-example" data-reading="kan" data-frequency="common">
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
<script>
const ruby = document.getElementById('kanji-example');
console.log(ruby.dataset.reading); // "kan"
console.log(ruby.dataset.frequency); // "common"
</script>
Пример использования в CSS:
<style>
ruby[data-frequency="rare"] {
background-color: #fff3cd;
}
ruby[data-reading-type="kunyomi"] rt {
color: #d63384;
}
</style>
Рекомендации по использованию:
- Используйте для хранения типа чтения (онное/кунное)
- Можно хранить уровень сложности иероглифа
- Полезно для систем обучения и словарей
- Сохраняйте значения в lowercase без пробелов
Типичные data-атрибуты для ruby:
data-reading-type(onyomi/kunyomi)data-language(ja/zh/ko)data-jlpt-level(N5-N1)data-frequency(common/rare)
Примечание: Атрибуты data-* идеально подходят для элементов <ruby> в учебных приложениях, позволяя хранить дополнительную информацию о иероглифах без визуального загромождения интерфейса. Они особенно полезны в сочетании с JavaScript для создания интерактивных систем изучения языков.