Атрибут dir тега <footer>
Описание
Атрибут dir определяет направление текста в элементе <footer>. Он особенно полезен для многоязычных сайтов, где может потребоваться отображение текста справа налево (например, для арабского или иврита).
<footer dir="ltr">
<p>© 2023 My Website. All rights reserved.</p>
</footer>
<footer dir="rtl">
<p>.جميع الحقوق محفوظة © 2023 موقعي</p>
</footer>
Допустимые значения:
| Значение | Описание | Применение |
|---|---|---|
ltr |
Left-to-right (слева направо) | Для большинства европейских языков |
rtl |
Right-to-left (справа налево) | Для арабского, иврита и др. |
auto |
Автоматическое определение | Когда направление неизвестно заранее |
Динамическое изменение направления:
<footer id="lang-footer">
<p>Текст с возможностью смены направления</p>
</footer>
<button onclick="setRTL()">RTL</button>
<button onclick="setLTR()">LTR</button>
<script>
function setRTL() {
document.getElementById('lang-footer').dir = 'rtl';
}
function setLTR() {
document.getElementById('lang-footer').dir = 'ltr';
}
</script>
Совместное использование с CSS:
<style>
footer[dir="rtl"] {
text-align: right;
padding-right: 20px;
}
footer[dir="ltr"] {
text-align: left;
padding-left: 20px;
}
</style>
<footer dir="rtl">
<p>نص عربي بمحاذاة إلى اليمين</p>
</footer>
Рекомендации по использованию:
- Используйте для футеров с многоязычным контентом
- Сочетайте с соответствующим lang-атрибутом
- Для автоматического определения используйте
dir="auto" - Учитывайте направление при позиционировании элементов в футере
Особенности работы:
- Меняет не только направление текста, но и порядок элементов
- В RTL-режиме меняется порядок колонок, если они есть
- Не влияет на порядок пунктов в нумерованных списках
- Поддерживается всеми современными браузерами
Примечание: Для футера сайта с мультиязычной поддержкой атрибут dir может быть особенно важен, так как подвал часто содержит важную информацию (контакты, меню, копирайты), которая должна корректно отображаться для всех пользователей независимо от языка.