Атрибут dir тега <mark>
Описание
Атрибут dir для тега <mark> определяет направление текста внутри выделенного фрагмента. Это особенно полезно для смешанного контента на языках с разным направлением письма (например, арабском и английском).
<p>
В этом предложении выделено
слово на арабском: <mark dir="rtl"> كتاب</mark>,
а остальной текст на русском.
</p>
Значения атрибута:
| Значение | Направление | Применение |
|---|---|---|
dir="ltr" |
Слева направо (по умолчанию) | Для большинства европейских языков |
dir="rtl" |
Справа налево | Для арабского, иврита и др. |
dir="auto" |
Автоматическое определение | Для смешанного контента |
Пример с CSS для RTL-текста:
<style>
mark[dir="rtl"] {
background-color: #e8f5e9;
padding: 0 0.3em;
unicode-bidi: isolate;
}
</style>
<p>
Смешанный текст с <mark dir="rtl">كلمة عربية</mark>
и обычным выделением <mark>term</mark>.
</p>
Рекомендации по использованию:
- Используйте
dir="auto"для пользовательского контента - Для сложных случаев сочетайте с CSS-свойством
unicode-bidi - Проверяйте отображение в разных браузерах
- Для целых документов устанавливайте направление на элементе
<html>
Пример с автоматическим определением:
<p>
Пользователь ввел:
<mark dir="auto">يمكن أن يحتوي على أي لغة</mark>,
и система автоматически определила направление.
</p>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- В сложных случаях может потребоваться CSS-свойство
direction - Автоматическое определение не всегда точно
- Пунктуация может некорректно отображаться при смешанных направлениях
Примечание: Атрибут dir особенно важен для многоязычных сайтов и приложений, где могут встречаться фрагменты текста на языках с разным направлением письма. Для изолированного управления направлением текста внутри выделения используйте сочетание dir и CSS-свойств.