Атрибут data-* тега <bdi>

Описание

Пользовательские атрибуты data-* для тега <bdi> позволяют хранить дополнительную информацию, связанную с изолированным текстом. Эти атрибуты особенно полезны для работы с многоязычным контентом через JavaScript.

Пример использования:

<bdi data-lang="ar" data-origin="user-generated" dir="auto"> نص عربي </bdi>

Доступ к данным через JavaScript:

const arabicText = document.querySelector('bdi[data-lang="ar"]'); console.log(arabicText.dataset.lang); // "ar" console.log(arabicText.dataset.origin); // "user-generated"

Типичные сценарии применения:

Атрибут Назначение
data-lang Язык содержимого (ar, he, fa и др.)
data-direction Явное указание направления (rtl/ltr)
data-origin Источник текста (user, system, translation)
data-username Идентификатор пользователя для RTL-имён

Совет: Используйте префикс data- для совместимости и валидности HTML. Для сложных данных применяйте JSON в атрибуте.

Пример с JSON-данными:

<bdi data-meta='{"lang":"fa","authorID":42}'> متن فارسی </bdi> <script> const meta = JSON.parse(document.querySelector('bdi').dataset.meta); console.log(meta.authorID); // 42 </script>

Лучшие практики:

  • Используйте стандартные названия языковых кодов (ISO 639-1)
  • Для смешанного контента указывайте основной язык
  • Избегайте хранения чувствительных данных
  • Сочетайте с атрибутом lang для доступности