html.okpython.net
HTML и CSS для начинающих

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справа налево) основное направление устанавливается справа налево.

Ссылки

Примеры

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