CSS свойство direction

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

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

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
direction	2.0	1.0	9.2	1.3	5.5	12.0

CSS синтаксис:

direction:"ltr | rtl | initial | inherit";

JavaScript синтаксис:

object.style.direction = "ltr"

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

Значение	Описание
ltr	Направление письма слева направо. Это значение по умолчанию.
rtl	Направление письма справа налево.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство direction.</title>
<style> 
.test {
direction : rtl; /* устанавливаем направление письма */
}
</style>
</head>
	<body>
		<p>Направление письма слева направо.</p>
		<p class = "test">Направление письма справа налево.</p>
	</body>
</html>

Пример изменения направления текста в CSS.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства unicode-bidi и direction.</title>
<style> 
.test {
direction : rtl; /* определяем направление письма справа налево */
unicode-bidi : bidi-override; /* используем двунаправленный алгоритм отображения текста */
}
</style>
</head>
<body>
<p>Абзац в котором не используется двунаправленный алгоритм отображения текста.</p>
<p class = "test">Абзац в котором используется двунаправленный алгоритм отображения текста и направление письма справа налево.</p>
</body>
</html>

Пример использования свойства CSS unicode-bidi и direction.

CSS свойства