CSS свойство direction

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
direction2.01.09.21.35.512.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.
Пример изменения направления текста в 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 unicode-bidi и direction.
CSS свойства