CSS :: Свойство direction

css-свойство direction (от англ. direction – направление) устанавливает направление письма и выравнивание текста, направление расположения колонок в таблицах, а также расположение полос прокрутки в блочных элементах.

При использовании свойства direction со встроенными элементами значение свойства unicode-bidi должно быть задано как embed или override.

Характеристики

Значение по умолчанию: ltr.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.direction="value".

Синтаксис

direction: ltr | rtl

Значения

ltr (от англ. from left to right – слева направо) основное направление устанавливается слева направо.
rtl (от англ. from right to left – справа налево) основное направление устанавливается справа налево.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-writing-modes-3/#propdef-direction

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/direction

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div{
		width: 300px;
		height: 100px;
		margin: 2em;
		border: 1px solid;
		white-space: nowrap;
		overflow: auto;
		}
						
		.dir_ltr{
		direction: ltr;
		}		

		.dir_rtl{
		direction: rtl;
		}
		
	</style>
	
</head>
<body>

	<div class="dir_ltr">
		direction: ltr direction: ltr direction: ltr direction: ltr<br> 
		direction: ltr direction: ltr direction: ltr direction: ltr<br>
		direction: ltr direction: ltr direction: ltr direction: ltr<br>		
		direction: ltr direction: ltr direction: ltr direction: ltr<br> 
		direction: ltr direction: ltr direction: ltr direction: ltr<br>
		direction: ltr direction: ltr direction: ltr direction: ltr<br>
		direction: ltr direction: ltr  		
	</div>

	<div class="dir_rtl">
		direction: rtl direction: rtl direction: rtl direction: rtl<br> 
		direction: rtl direction: rtl direction: rtl direction: rtl<br> 
		direction: rtl direction: rtl direction: rtl direction: rtl<br> 
		direction: rtl direction: rtl direction: rtl direction: rtl<br> 
		direction: rtl direction: rtl direction: rtl direction: rtl<br> 
		direction: rtl direction: rtl direction: rtl direction: rtl<br>
		direction: rtl direction: rtl  		
	</div>	
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>

	<style>
	
		table{
		border-collapse: collapse;
		}
		
		table, td{
		border: 1px solid;
		}
						
		.dir_ltr{
		direction: ltr;
		}		

		.dir_rtl{
		direction: rtl;
		}
		
	</style>
	
</head>
<body>

	<table class="dir_ltr">
		
		<tr>
			<td>Ячейка 1.1</td>  <td>Ячейка 1.2</td>
		</tr>
		
		
		<tr class="dir_rtl">
			<td>Ячейка 2.1</td>  <td>Ячейка 2.2</td>
		</tr>		
		
	</table>

	<table class="dir_rtl">
		
		<tr>
			<td>Ячейка 1.1</td>  <td>Ячейка 1.2</td>
		</tr>
		
		
		<tr class="dir_rtl">
			<td>Ячейка 2.1</td>  <td>Ячейка 2.2</td>
		</tr>		
		
	</table>

</body>
</html>

Пример №2