Атрибут data-* тега <del>
Описание
Атрибут dir определяет направление текста внутри элемента <del>. Этот атрибут особенно полезен для многоязычных документов, где удаленный текст может быть на языке с написанием справа налево (RTL).
<p>
Цена изменена:
<del dir="ltr">$199.99</del>
<ins>$149.99</ins>
</p>
<p>
النص المحذوف:
<del dir="rtl">هذا النص تم حذفه</del>
<ins dir="rtl">هذا النص الجديد</ins>
</p>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
ltr |
Слева направо (Left-to-Right) | Для языков с LTR-направлением (английский, русский) |
rtl |
Справа налево (Right-to-Left) | Для языков с RTL-направлением (арабский, иврит) |
auto |
Автоматическое определение | Когда направление неизвестно заранее |
Особенности работы:
- Наследуется дочерними элементами
- Влияет на порядок отображения текста и пунктуации
- Работает совместно с CSS-свойством
direction - Для RTL-языков рекомендуется также указывать
lang
Пример с CSS:
<style>
/* Стили для RTL-текста */
del[dir="rtl"] {
text-align: right;
padding-right: 10px;
border-right: 2px solid #ff6b6b;
}
/* Стили для LTR-текста */
del[dir="ltr"] {
padding-left: 10px;
border-left: 2px solid #ff6b6b;
}
</style>
<p>
<del dir="rtl" lang="ar">النص القديم</del>
<ins dir="rtl" lang="ar">النص الجديد</ins>
</p>
Рекомендации по использованию:
- Используйте явное указание направления для важного контента
- Для смешанного контента применяйте
dir="auto" - Сочетайте с атрибутом
langдля лучшей семантики - Тестируйте отображение в различных браузерах
Пример с JavaScript:
<p id="direction-example">
<del id="deleted-text">Old price: $199.99</del>
</p>
<button onclick="changeToRTL()">Сменить на RTL</button>
<script>
function changeToRTL() {
const del = document.getElementById('deleted-text');
del.dir = 'rtl';
del.lang = 'ar';
del.textContent = 'السعر القديم: ١٩٩.٩٩';
}
</script>
Важные замечания:
- Не изменяет порядок элементов, только направление текста
- Для полной RTL-поддержки может потребоваться дополнительный CSS
- Некоторые символы (например, скобки) могут неправильно отражаться в RTL
- Значение по умолчанию наследуется от родительских элементов
Примечание: Правильное использование атрибута dir особенно важно для многоязычных документов, где могут встречаться фрагменты на языках с разным направлением письма. Для сложных случаев рассмотрите использование CSS-свойства direction вместе с unicode-bidi.