CSS Direction (ltr, rtl). Примеры. Направление написания текста в html

Свойство CSS Direction нужен для задания направления текста. Имеет смысл использовать только для иврита и арабского языка. Также полезен в таблицах, если нужно вывести колонки начиная с последний до первой.

Синтаксис CSS direction

direction: ltr | rtl | inherit;

Где

ltr (действует по умолчанию) - направление слева направо
rtl - направление справа налево;
inherit - наследование от элемента родителя;

Свойство CSS Direction влияет на

Способ отображения текста в блоке;
Упорядочивание колонок в таблице;
Полосу прокрутки;

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

Пример №2. Использование direction в таблицах

<html>
<head>
<style>
	.direction{
	direction: rtl;
	width: 400px;
	}
</style>
</head>
<body>
<table class="direction">
	<tr>
		<td>
			Столбец 1
		</td>
		<td>
			Столбец 2
		</td>
		<td>
			Столбец 3
		</td>
	</tr>
</table>
</body>
</html>

Преобразуется на странице в следующее:

Столбец 1

Столбец 2

Столбец 3

Пример №2. Пример direction в блоках

<html>
<head>
<style>
	.direction{
	direction: rtl;
	}
</style>
</head>
<body>
	<div class="direction">123456789</div>
</body>
</html>

Преобразуется на странице в следующее:

123456789.

Обратите внимание, что точка стала слева, а не справа. Весь текст выровнялся по правому краю.

← Перейти в каталог CSS уроков