HTML-атрибут dir
Атрибут dir входит в состав глобальных атрибутов и задаёт направление текста содержимого элемента. Узнайте, на каких элементах его можно использовать.
HTML-атрибут dir задаёт базовое направление текста содержимого элемента. Он необходим для корректного отображения HTML в письменах с направлением справа налево (RTL), таких как арабский, иврит, персидский и урду. Сотни миллионов людей читают на языках, использующих эти письмена, поэтому правильная установка направления является ключевым аспектом интернационализации.
dir — это глобальный атрибут, поэтому его можно применять к любому HTML-элементу. Значение, которое использует элемент, наследуется от ближайшего предка, у которого задан dir; если такого предка нет, применяется значение ltr.
Значения
Атрибут dir может принимать три значения:
ltr— направление текста слева направо (значение по умолчанию в большинстве браузеров). Используется для латинского, кириллического, греческого, CJK и большинства других письмен.rtl— направление текста справа налево. Используется для арабского, иврита и аналогичных письмен.auto— браузер определяет направление самостоятельно на основе содержимого, используя эвристику первого сильного направленного символа (см. предупреждение ниже).
Синтаксис
<tag dir="ltr | rtl | auto">content</tag>Задание направления документа с помощью dir на <html>
Наиболее распространённое и важное применение dir — на элементе <html>. Это устанавливает базовое направление для всей страницы, которое затем наследуют все элементы. Для арабских и ивритских страниц следует всегда сочетать dir="rtl" с соответствующим атрибутом lang:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا مثال على نص يُكتب من اليمين إلى اليسار.</p>
</body>
</html>Поскольку dir="rtl" задан на <html>, заголовок, абзац, маркеры списка, положение полосы прокрутки и выравнивание текста по умолчанию — всё это будет идти справа налево без какой-либо дополнительной разметки.
Пример: наглядный эффект RTL
В исходном примере dir="rtl" применялся к английскому тексту, где эффект почти не заметен. Направление становится очевидным только при использовании реального RTL-текста или смешанной пунктуации. Сравните эти абзацы:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dir attribute</title>
</head>
<body>
<p dir="ltr">שלום עולם — Hebrew greeting (forced ltr)</p>
<p dir="rtl">שלום עולם — Hebrew greeting (rtl)</p>
<p dir="auto">שלום עולם — Hebrew greeting (auto)</p>
</body>
</html>В абзаце с rtl иврит читается справа налево, а следующий текст и пунктуация переупорядочиваются соответствующим образом. В абзаце с auto браузер определяет первый сильный символ (иврит) и автоматически выбирает rtl.
Когда явно задавать ltr
Установка dir="ltr" на дочернем элементе полезна для переопределения унаследованного направления rtl. Например, внутри арабской (rtl) страницы может находиться блок кода, URL или поле формы на английском языке, которое должно оставаться с направлением слева направо:
<html lang="ar" dir="rtl">
<body>
<p>عنوان الموقع:</p>
<p dir="ltr">https://www.w3docs.com/learn-html</p>
</body>
</html>Без dir="ltr" URL унаследует направление страницы rtl, и его пунктуация может быть визуально переупорядочена сбивающим с толку образом.
О значении auto
auto удобен для пользовательского контента (комментарии, имена пользователей, результаты поиска), когда язык заранее неизвестен. Однако оно основывается на простой эвристике: браузер ищет первый сильный направленный символ и использует его для определения направления всего элемента. Это может привести к ошибке — например, комментарий, начинающийся с эмодзи, цифры или латинского слова, но написанный преимущественно по-арабски, будет отображаться слева направо. Для изоляции текста с неизвестным направлением на уровне отдельных строк предпочтительнее использовать элемент <bdi>, который одновременно изолирует текст и может применять auto.
dir в сравнении с <bdo>, <bdi> и CSS direction
Эти инструменты связаны между собой, но решают разные задачи:
- Атрибут
dir— задаёт базовое направление, которое наследуют элемент и его потомки. Браузер при этом по-прежнему применяет алгоритм двунаправленного текста Unicode (bidi) для переупорядочивания фрагментов с разными направлениями. <bdo>— переопределение двунаправленного текста. Принудительно задаёт единственное направление и отключает автоматическое переупорядочивание bidi для своего содержимого. Используется, когда нужно перевернуть символы вне зависимости от их естественного направления.<bdi>— изоляция двунаправленного текста. Изолирует фрагмент текста, чтобы его направление не влияло на окружающий текст — идеально подходит для встраивания непредсказуемого пользовательского контента.- CSS
direction— аналог атрибутаdirна уровне стилей. HTML-атрибутdirпредпочтительнее, поскольку он также передаёт информацию вспомогательным технологиям и алгоритму bidi, тогда как только CSS не всегда обеспечивает это. При наличии обоих атрибут, как правило, отображается в то же вычисленное значение.
Поддержка браузерами
Атрибут dir поддерживается всеми современными браузерами уже очень долгое время, поэтому его можно использовать без запасных вариантов.