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

Описание

Атрибут class для тега <bdi> позволяет назначать классы для стилизации и JavaScript-обработки.

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

<p> Пользователь <bdi class="username arabic" dir="auto">محمد</bdi> оставил сообщение </p>

Применение в CSS:

/* Стилизация для RTL-текста */ .username.arabic { color: #2a5db0; font-weight: bold; padding: 0 3px; background-color: #f0f5ff; }

Использование в JavaScript:

// Найти все RTL-имена пользователей const arabicNames = document.querySelectorAll('bdi.arabic'); arabicNames.forEach(name => { console.log('RTL имя:', name.textContent); });

Практические сценарии:

Сценарий Пример класса
Выделение текста на арабском arabic-text
Ивритские имена пользователей hebrew-user
Смешанные направления текста mixed-direction
Специальное форматирование formatted-bdi

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

  • Поддерживает множественные классы (через пробел)
  • Полностью совместим со всеми CSS-селекторами
  • Работает со всеми методами classList в JavaScript
  • Не влияет на семантическое поведение <bdi>

Совет: Используйте классы для визуального выделения текста с разным направлением, но сохраняйте семантику через dir="auto".

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

  • Используйте осмысленные имена классов (user-name вместо style1)
  • Тестируйте отображение в RTL- и LTR-контекстах