Атрибут dir тега <body>

Описание

Атрибут dir определяет направление текста (text direction) для содержимого элемента. При применении к тегу <body> он задает базовое направление текста для всей страницы.

Пример использования:
<body dir="rtl"> <h1>مرحبا بالعالم</h1> <!-- Арабский текст --> <p>هذه صفحة باللغة العربية</p> </body>

Допустимые значения:

Значение Описание
ltr Слева направо (left-to-right) - по умолчанию
rtl Справа налево (right-to-left) - для арабского, иврита и др.
auto Автоматическое определение (на основе содержимого)

Основные эффекты:

  • Направление текста (выравнивание по умолчанию)
  • Порядок колонок в таблицах
  • Направление полосы прокрутки
  • Порядок элементов в списках
  • Расположение кнопок в диалогах

Рекомендации по использованию:

  • Указывайте для всего документа при RTL-языках
  • Для смешанного контента используйте dir="auto"
  • Переопределяйте направление для отдельных элементов при необходимости
  • Тестируйте верстку в обоих направлениях
  • Сочетайте с соответствующим lang-атрибутом

Практический пример с переключением:

<body id="main-body" dir="ltr"> <button onclick="toggleDirection()">Переключить направление</button> <div>Пример текста с направлением письма</div> <script> function toggleDirection() { const body = document.getElementById('main-body'); body.dir = body.dir === 'ltr' ? 'rtl' : 'ltr'; } </script> </body>

Особенности RTL-верстки:

  • Используйте логические свойства CSS (margin-inline-start вместо margin-left)
  • Проверяйте расположение иконок и стрелок
  • Учитывайте направление анимаций
  • Тестируйте формы и таблицы
  • Используйте CSS-переменные для упрощения переключения

CSS для RTL-поддержки:

/* Логические свойства */ .element { margin-inline-start: 10px; /* Заменяет margin-left */ padding-inline-end: 20px; /* Заменяет padding-right */ text-align: start; /* Вместо text-align: left */ } /* Стили для RTL-контекста */ [dir="rtl"] .sidebar { float: right; } /* Автоматическое направление для контента */ [dir="auto"] { unicode-bidi: isolate; }

Совместимость с фреймворками:

  • Bootstrap: Имеет встроенную RTL-поддержку
  • Material UI: Требует настройки direction provider
  • Tailwind: Поддерживает RTL через модификаторы (rtl:)

Важные замечания:

  • Атрибут dir влияет только на направление текста, но не на язык
  • Всегда указывайте язык документа (lang атрибут)
  • Некоторые браузеры могут автоматически определять направление
  • Для сложных интерфейсов может потребоваться зеркалирование layout
  • Проверяйте работу с клавиатурой в RTL-режиме

Примечание: Для многоязычных сайтов рекомендуется проектировать интерфейс с учетом обоих направлений письма с самого начала. Использование логических свойств CSS и продуманной структуры DOM значительно упростит поддержку RTL-версий.