Атрибут dir тега <em>
Описание
Атрибут dir определяет направление текста внутри элемента <em> (акцентированного текста). Особенно полезен для смешанного контента на языках с разным направлением письма.
Наследование: Если не указан, направление наследуется от родительских элементов.
Пример использования:
<p>
В этом предложении <em dir="rtl" lang="ar">كلمة مهمة</em>
содержится арабское слово.
</p>
Допустимые значения:
| Значение | Описание | Применение |
|---|---|---|
ltr |
Слева направо | Латинские, кириллические языки |
rtl |
Справа налево | Арабский, иврит |
auto |
Автоопределение | Смешанный контент |
Правильное применение:
<p>
Слово <em dir="auto">كتب</em> в арабском означает "он написал".
</p>
<!-- Явное указание направления -->
<p>
<em dir="rtl" lang="he">מילה חשובה</em> - важное слово на иврите.
</p>
Стилизация для разных направлений:
<style>
/* Общие стили для акцентов */
em {
font-style: normal;
padding: 0 4px;
border-radius: 3px;
}
/* Стили для RTL-языков */
em[dir="rtl"] {
font-family: "Arial Arabic", sans-serif;
background-color: #f8f9fa;
}
/* Визуальное выделение */
em[dir="ltr"] {
border-left: 2px solid blue;
}
em[dir="rtl"] {
border-right: 2px solid red;
}
</style>
<p>
<em dir="ltr">Left-to-right</em> и
<em dir="rtl">اليمين إلى اليسار</em> текст.
</p>
Динамическое изменение:
<p>
<em id="dir-example">Пример динамического направления</em>
</p>
<button onclick="changeDir('ltr')">LTR</button>
<button onclick="changeDir('rtl')">RTL</button>
<script>
function changeDir(direction) {
document.getElementById('dir-example').dir = direction;
}
</script>
Рекомендации по использованию:
- Сочетайте с атрибутом
langдля точного указания языка - Для смешанного контента используйте
dir="auto" - Проверяйте отображение в разных браузерах
- Учитывайте расположение пунктуации в RTL-текстах
- Для сложных случаев используйте CSS-свойство
direction
Пример с вложенными элементами:
<p>
Смешанный <em dir="rtl">
نص <span dir="ltr">123</span> عربي
</em> текст.
</p>
Ограничения поддержки:
- Старые версии IE могут требовать дополнительных CSS-правил
- Некоторые браузеры неправильно обрабатывают смешанное направление
- На мобильных устройствах могут быть особенности рендеринга
Примечание: Правильное использование атрибута dir особенно важно для многоязычных интерфейсов. Для профессиональной реализации RTL-поддержки часто требуется комплексная настройка как HTML-атрибутов, так и CSS-стилей.