Атрибут dir
Задает направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.
Синтаксис
Значения
ltr Текст отображается как обычно — слева направо. rtl Текст инвертируется и отображается справа налево.
Значение по умолчанию
Применяется к тегам
Пример
HTML5 IE Cr Op Sa Fx
Атрибут dir שבת — суббота
В ашкеназском произношении звучит как «ша́бос» (идиш «ша́бес»), а в сефардском — как «шаба́т».
Результат данного примера показан на рис. 1. В первом предложении изменился порядок слов.

Рис. 1. Направление текста
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы
Атрибут dir
Определяет направление и отображение текста — слева направо или справа налево.
Синтаксис
Обязательный атрибут
Значения
ltr Текст отображается как обычно — слева направо. rtl Текст инвертируется и отображается справа налево. Иными словами, последнюю букву в предложении браузер покажет первой, и наоборот, первую букву в тексте — последней.
Значение по умолчанию
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы
Общий HTML атрибут dir
Атрибут dir определяет направление вывода текста в HTML элементе.
В HTML5 атрибут dir можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, не всегда это имеет смысл!).
В HTML 4.01 атрибут dir нельзя использовать с элементами , , , , , , , .
Синтаксис атрибута
element dir=»ltr | rtl | auto»>
Значения атрибута
| Значение | Описание |
|---|---|
| ltr | Значение по умолчанию. Направление текста слева направо. |
| rtl | Направление текста справа налево. |
| auto | Направление текста будет определяться браузером, основываясь на содержимом (следует использовать только если направление текста неизвестно). |
Пример использования атрибута
Параграф с направлением вывода справа налево:
Пишет текст справа налево!
Атрибут dir
Атрибут dir используется для указания направления движения текста (слева направо или справа налево), язык которого является основным для данного элемента. Это бывает нужно в тех случаях, когда в тексте присутствуют фразы из разных языков, у которых направление письма различается, например арабский или персидский языки имеют письменность справа налево.
Кроме этого, в зависимости от значения атрибута dir , браузеры будут менять не только направление текста, но и положение полосы прокрутки (скроллинга) элемента, а если его установить у тега , то и порядок столбцов HTML-таблицы. Однако с помощь этого атрибута нельзя поменять положение ячеек в отдельном ряду таблицы (тег ).
Атрибут dir появился в HTML довольно давно, но раньше он поддерживался ограниченным количеством тегов, а теперь он есть у всех. Поэтому, если на страницах описания каких-то тегов вы увидите логотип HTML 5 ( ) напротив атрибута, то знайте, что этот тег начал поддерживать атрибут dir именно с версии HTML 5. Впрочем, таких тегов очень мало. C другой стороны, хоть в HTML 5 теперь все теги могут иметь этот атрибут — не факт, что браузеры его будут также понимать во всех случаях. Более того, в описаниях W3C также нет конкретики по данному вопросу, например о том, для чего использовать dir в тегах .
Итак, атрибут dir сообщает браузеру о том, какое направление письма имеет язык, для которого, в сущности, предназначен текст внутри данного HTML-элемента. Основываясь на этих данных браузер, применив двунаправленный алгоритм, решит, в каком направлении будет правильней вывести основной текст на странице, а какие слова в коде текста перевернуть, если они написаны на языке с направлением письменности отличным от основного языка.
Кстати, программы с двунаправленным алгоритмом «вшиты» не только в браузеры, но и, допустим, в почтовые клиенты (Outlook, Bat и т.д.), а также во многие другие приложения работающие с текстом.
Чтобы до конца понимать суть использования атрибута dir , необходимо также понимать и то, как работает этот алгоритм, поэтому давайте остановимся на нем поподробней.
Допустим в коде страницы есть параграф содержащий текст на русском и арабском языках, обозначим слова на русском, как «русский1», «русский2», «русский3», а слова на арабском, как «арабский1», «арабский2», «арабский3». Я использовал именно такое обозначение арабских слов из-за того, что настоящие слова на этом языке довольно сложны для восприятия русскоговорящего населения.
Пример части кода HTML:
русский1 арабский1 русский2 арабский2 русский3 арабский3
Так как во всех HTML-редакторах текст всегда пишется слева направо, то это означает, что арабские слова нашего примера сейчас написаны неверно и браузер, используя двунаправленный алгоритм их должен будет перевернуть. Но вот как он это сделает, будет зависеть от атрибута dir .
Пример со значением dir=»ltr» (слева направо):
русский1 арабский1 русский2 арабский2 русский3 арабский3
Результат в браузере
русский1 1йиксбара русский2 2йиксбара русский3 3йиксбара
В этом примере атрибут dir сообщил браузеру то, что основной язык имеет направление слева направо, поэтому он и сохранил такой стиль письма, а арабские слова просто перевернул так, как этого требует данный язык.
Теперь рассмотрим другой пример.
Пример со значением dir=»rtl» (справа налево):
русский1 арабский1 русский2 арабский2 русский3 арабский3
Результат в браузере
3йиксбара русский3 2йиксбара русский2 1йиксбара русский1
В данном примере атрибут dir указал браузеру то, что основной язык элемента имеет направление справа налево, поэтому он полностью перевернул всю строку. Но так как браузер нашел в тексте русские слова, то, используя свой двунаправленный алгоритм, он вычислил, что они пишутся слева направо, поэтому он так их и вывел.
Еще раз обращаю ваше внимание на то, что указанные выше примеры были всего лишь имитацией действия двунаправленного алгоритма, чтобы увидеть его реальную работу необходимо использовать настоящие слова из языков имеющих разное направление письма.
Значения
Значением атрибута dir является одно из ключевых слов, задающих направление текста.
- ltr — Left-to-right (слева направо).
- rtl — Right-to-left (справа налево).
Значение по умолчанию: ltr.
Синтаксис
Обязательный атрибут: нет.
Пример HTML: применение атрибута dir
seodon.ru - атрибут dir слива برقوق груша كمثرى
слива برقوق груша كمثرى
Результат: Применение атрибута dir.

Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |