Атрибут data-* тега <rt>
Описание
Атрибуты data-* для тега <rt> позволяют хранить дополнительную информацию о ruby-аннотации (фонетической подсказке). Эти атрибуты не влияют на отображение, но могут использоваться JavaScript для расширенной функциональности.
<ruby>
漢字
<rt
data-reading-type="onyomi"
data-romaji="kanji"
data-language="ja">
かんじ
</rt>
</ruby>
Типичные сценарии применения:
| Атрибут | Назначение | Пример |
|---|---|---|
data-reading-type |
Тип чтения (onyomi/kunyomi) | data-reading-type="kunyomi" |
data-romaji |
Транслитерация латиницей | data-romaji="tokyo" |
data-language |
Язык аннотации | data-language="ja" |
data-pinyin |
Пиньинь для китайских иероглифов | data-pinyin="hànzì" |
Пример с JavaScript обработкой:
<ruby id="example-ruby">
東京 <rt data-romaji="tōkyō" data-meaning="capital">とうきょう</rt>
</ruby>
<script>
const rt = document.querySelector('#example-ruby rt');
console.log('Romaji:', rt.dataset.romaji); // "tōkyō"
console.log('Meaning:', rt.dataset.meaning); // "capital"
</script>
Особенности работы:
- Имена атрибутов должны быть в kebab-case (дефисы между словами)
- Значения всегда строковые (для других типов требуется преобразование)
- Доступ через свойство
datasetв JavaScript - Не влияют на SEO при правильном использовании
Рекомендации:
- Используйте для хранения мета-информации о чтении иероглифов
- Избегайте хранения больших объемов данных
- Для сложных структур используйте JSON в одном атрибуте
- Придерживайтесь единого стиля именования в проекте
Пример с JSON данными:
<ruby>
愛
<rt data-reading-info='{"type":"onyomi","romaji":"ai","meaning":"love"}'>
あい
</rt>
</ruby>
<script>
const info = JSON.parse(document.querySelector('rt').dataset.readingInfo);
console.log(info.meaning); // "love"
</script>
Примечание: Хотя data-атрибуты предоставляют гибкий способ хранения информации, для сложных систем изучения языков рассмотрите использование специализированных JavaScript-структур или API.