CSS свойство direction

Определение и применение

CSS свойство direction указывает направление текста/направление письма, устанавливает выравнивание текста по умолчанию, направление колонок в таблицах и расположения полос прокрутки в блочных элементах.

Обращаю Ваше внимание на то, что в HTML5 существует тег <bdi>, который позволяет изолировать фрагмент текста, который отформатирован в другом направлении. При этом направление текста вы можете задать, используя HTML глобальный атрибут dir.

Попробуйте значения direction

Меняется базовое направление текста. Латинские и арабские фрагменты сохраняют собственные правила направления; это не простое зеркальное отражение строки.

Значение свойства

direction: ltr

HTML и CSS примера
HTML
<div class="stage">
  <div class="demo-target">CSS — مرحبا — 123</div>
</div>
CSS
.stage {
  width: 100%;
  max-width: 300px;
  color: #172c3d;
  background: #edf2f5;
  font: 18px/1.5 system-ui;
  padding: 12px;
  border: 2px dashed #607589;
}
.demo-target {
  padding: 12px;
  color: #b53625;
  background: #ffe4bd;
  border: 3px solid #245a85;
  direction: ltr;
}

Поддержка браузерами

Спецификации: CSS writing-modes, svgwg

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.direction
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
direction✓2✓12✓1✓9.2✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
ltr✓2✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
rtl✓2✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
Control direction of vertical range sliders, meters, and progress bars✓124✓124◐120✓110◐16.5✓124◐120✓82◐16.5✓27.0✓124◐16.5

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
direction: ltr | rtl;

/* Глобальные значения */
direction: initial | inherit | unset | revert | revert-layer;

| — выбор варианта.

JavaScript синтаксис:

JavaScript
element.style.direction = "ltr";

Начальное значение свойства

ltr.

Значения свойства

Значения direction
Значение Описание
ltr Направление письма слева направо. Начальное значение.
rtl Направление письма справа налево.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для наследуемого свойства direction наследует вычисленное значение у родительского элемента.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Writing Modes — спецификация direction.

Наследуется

Да.

Анимируемое

Нет.

Примеры, попробуйте сами

Свойство direction.

Измените rtl на ltr. Во втором примере сравните bidi-override и normal: принудительное переупорядочивание отличается от обычного направления письма.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />

    <title>Свойство direction.</title>
  </head>
  <body>
    <h3>Вариант A</h3>
    <p>ABC 123 — пример текста</p>
    <h3>Вариант B</h3>
    <p class="test">ABC 123 — пример текста</p>
  </body>
</html>
style.css
CSS
.test {
    direction: rtl;
}

Свойство CSS unicode-bidi и direction.

Измените rtl на ltr. Во втором примере сравните bidi-override и normal: принудительное переупорядочивание отличается от обычного направления письма.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />

    <title>Свойство CSS unicode-bidi и direction.</title>
  </head>
  <body>
    <h3>Вариант A</h3>
    <p>ABC 123 — пример текста</p>
    <h3>Вариант B</h3>
    <p class="test">ABC 123 — пример текста</p>
  </body>
</html>
style.css
CSS
.test {
    direction: rtl;
    unicode-bidi: bidi-override;
}