Атрибут style тега <bdi>
Описание
Атрибут style для тега <bdi> позволяет применять inline-стили к изолированному тексту. Хотя технически это возможно, следует избегать злоупотребления этим подходом, чтобы не нарушать семантическое назначение элемента.
Пример использования:
<p>
Сообщение от
<bdi style="color: #2a5db0; font-weight: bold" dir="rtl" lang="ar">
محمد
</bdi>
требует ответа
</p>
Рекомендации по стилизации:
| Свойство | Пример | Примечание |
|---|---|---|
| Цвет текста | color: #2a5db0 |
Учитывайте контрастность |
| Начертание | font-weight: bold |
Проверяйте поддержку RTL-шрифтов |
| Отступы | padding: 0 5px |
Учитывайте направление текста |
| Фон | background-color: #f0f5ff |
Для визуального выделения |
Лучшие практики:
- Используйте внешние CSS-стили вместо inline, где это возможно
- Для RTL-текста проверяйте корректность отображения стилей
- Избегайте свойств, влияющих на направление текста (direction, writing-mode)
- Сочетайте с атрибутами
dirиlang
Проблемный пример:
<!-- Неправильно: стиль нарушает семантику -->
<bdi style="float: right; width: 100px">
نص عربي
</bdi>
<!-- Правильно: -->
<span style="float: right">
<bdi dir="rtl">نص عربي</bdi>
</span>
Совет: Для сложной стилизации лучше использовать внешний CSS с классами, сохраняя <bdi> только для изоляции направления текста.
Пример с CSS-классами:
<style>
.rtl-user {
color: #2a5db0;
font-family: 'Segoe UI', Tahoma, sans-serif;
padding: 2px 5px;
background-color: #f0f5ff;
border-radius: 3px;
}
</style>
<p>
<bdi class="rtl-user" dir="rtl" lang="ar">
أحمد
</bdi>
присоединился к чату
</p>