/ ↲
    Расширенный поиск

    HTML

    Атрибут dir

    Указываем направление текста внутри всего документа или отдельного элемента.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Глобальный атрибут dir устанавливает направление вывода текста внутри элемента. Действие атрибута наследуется от родительского элемента, но может быть переопределено. Может быть применён к любому HTML-элементу, но не для всех элементов имеет смысл.

    Пример

    Скопировано
            
          
          ...  <p dir="ltr">Пример русского текста с верно установленным направлением.</p>  <p dir="rtl">Пример русского текста с неверно установленным направлением.</p>  <hr />  <p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>  <p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>...
          ...
  <p dir="ltr">Пример русского текста с верно установленным направлением.</p>
  <p dir="rtl">Пример русского текста с неверно установленным направлением.</p>

  <hr />

  <p>هذه الفقرة باللغة العربية ولكن بشكل خاطئ من اليسار إلى اليمين.</p>
  <p dir="auto">هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
...
    Открыть демо в новой вкладке

    В примере рассмотрены различные варианты выравнивания текста — слева направо (ltr), справа налево (rtl) и автоматическое определение направления текста браузером.

    Как пишется

    Скопировано

    Атрибут dir принимает одно из следующих значений:

    • ltr — текст будет написан слева направо. Такое направление текста используется, например, для русского или английского языков. Является значением по умолчанию;
    • rtl — текст будет написан справа налево. Актуально, например, для арабских языков;
    • auto — направление текста определяется браузером.

    Алгоритм, используемый браузерами для определения направления текста при значении auto, можно представить следующим образом:

    • браузер определяет, к какому типу языков (в плане направления написания текста) принадлежит первый символ абзаца;
    • устанавливается направление вывода текста исходя из норм языка, в котором используется данный символ.

    Подробнее

    Скопировано

    В HTML направление текста задаётся либо ближайшим родительским элементом, который использует атрибут dir, либо, при отсутствии такого атрибута, используется значение ltr.

    При изменении значения атрибута на rtl, браузер автоматически изменит как направление текста, так и его выравнивание (текст будет выровнен по правому краю), в соответствии с тем, как это принято в таких языках.

    Чаще всего атрибут dir следует использовать для задания базового направления текста для всего документа. Чтобы это сделать необходимо применить атрибут к тегу <html>.

            
          
          <!DOCTYPE html><html dir="rtl" lang="ar">  <head>    <meta charset="utf-8">  </head>  ...</html>
          <!DOCTYPE html>
<html dir="rtl" lang="ar">
  <head>
    <meta charset="utf-8">
  </head>
  ...
</html>

    Объявляя общее для документа направление текста в теге <html>, не забудьте также объявить язык документа с помощью атрибута lang. Это поможет вспомогательным технологиям, например, таким как скринридер, верно взаимодействовать с контентом на странице. При этом, объявления языка не указывает направление текста. Всегда лучше объявлять направление текста явно с помощью атрибута dir.

    Также атрибут dir может быть использован внутри отдельных блоков, чтобы изменить направление текста только в заданном блоке. Такие блоки называются блоками двунаправленного текста.

            
          
          <html dir="rtl" lang="ar">  ...  <blockquote dir="ltr" lang="ru" cite="Мастер и Маргарита">    Поймите, что язык может скрывать истину, а глаза – никогда!  </blockquote>  ...</html
          <html dir="rtl" lang="ar">
  ...
  <blockquote dir="ltr" lang="ru" cite="Мастер и Маргарита">
    Поймите, что язык может скрывать истину, а глаза – никогда!
  </blockquote>
  ...
</html

    Значение auto

    Скопировано

    Атрибут dir со значением auto следует применять только в том случае, если заранее неизвестно направление текста, например, если данные на сайт поступают из внешних источников.

    При определении направления текста, в этом случае, браузер, при поиске первого строго типизированного символа, пропускает текст в элементе <bdi>, а также текст в элементах <script>, <style> и <textarea>, в любом элементе с атрибутом dir.

    Открыть демо в новой вкладке

    Обратите внимание, что этот используемый браузерами алгоритм не всегда надёжный. В примере последний абзац неверно интерпретируется браузером. Так как первый символ является арабским, то браузер выбрал направление текста справа налево. В результате, последняя строка будет выровнена по правому краю, а текст «верно?» находится слева от арабского текста, с вопросительным знаком в крайнем левом углу.

    Также значение auto можно применять если данные вводятся пользователем в элементах формы, таких как <input> или <textarea>.

    Открыть демо в новой вкладке

    В примере можно заметить, что браузер сам определяет направление текста в зависимости от первой введённой буквы. Для элемента <textarea> направление текста определяется отдельно для каждого абзаца. Абзацы rtl и ltr в этом случае также выравниваются по-разному.

    Подсказки

    Скопировано

    💡 Используйте логические CSS-свойства для стилизации блоков, это сделает вёрстку предсказуемой вне зависимости от направления текста.

    Читайте также