direction

Браузер	Internet Эксплорер				Нетscape		Опера				Safari			Файер фох
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Краткая информация

CSS (ЦСС)	CSS (ЦСС)2
Значение по умолчанию	ltr
Наследуется	Да
Применяется	Ко всем элементам
Аналог ШТМЛ	<тег direction="ltr \| rtl"">
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.ШТМЛ#propdef-direction

Описание

direction предназначен для сайтов, в которых имеет значение направление контента. Например, при использовании арабского алфавита чтение происходит справа налево.

Атрибут direction дастаткова универсален и управляет следующими возможностями:

способ отображения контента в блоке;
порядок колонок в таблице;
позиция полосы прокрутки в блоке;
положение последней висячей строки контентового блока при text-align: justify.

Для использования со встроенными элементами, значение атрибута unicode-bidi должно быть задано как embed или override.

Синтаксис

direction: ltl | rtl

Значения

ltr: Устанавливает направление слева направо.
rtl: Задает направление справа налево.

Пример 1

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>direction</title>
  <style type="text/CSS (ЦСС)">
   DIV.rtl { 
    direction: rtl; /* Направление */ 
    width: 200px; /* Ширина блока */ 
    height: 150px; /* Высота блока */ 
    overflow: scroll; /* полоска прокрутки */ 
    text-align: left; /* Выравнивание по левоой стороне */ 
    padding: 5px; /* Поля вокруг контента */ 
    border: 1px solid #000; /* Параметры рамки */ 
   }
  </style>
 </head>
 <body>
  <div class="rtl">Велосипед уже изобрели, различные приемы верстки тоже. 
  Так что больше знакомься с мировым опытом по части верстки и тебе не придется тратить 
  время на разработку того, что всем давно известно.</div>
 </body>
</html>

Результат данного примера показан на рис. 1. Обратите внимание на положение точки в предложении, а также на то, что полоска прокрутки в браузере Internet Эксплорер отображается слева.

Рис. 1

Рис. 1. Результат использования direction в браузере Internet Эксплорер

Пример 2

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>direction</title>
  <style type="text/CSS (ЦСС)">
    TABLE { 
     direction: rtl; /* Колонки идут справа налево */
     width: 100%; /* Ширина таблицы */
    } 
  </style>
 </head>
 <body>
  <table cellspacing="0" border="1">
   <tr> 
     <td>&nbsp;</td><td>1999</td><td>2000</td>
     <td>2001</td><td>2002</td><td>2003</td>
   </tr>
   <tr> 
     <td>Нефть</td><td>16</td><td>34</td>
     <td>62</td><td>74</td><td>57</td>
   </tr>
   <tr>
     <td>Золото</td><td>4</td><td>69</td>
     <td>72</td><td>56</td><td>47</td>
   </tr>
   <tr>
     <td>Дерево</td><td>7</td><td>73</td>
     <td>79</td><td>34</td><td>86</td>
   </tr>
  </table> 
 </body>
</html>

Результат данного примера показан на рис. 2. Колонки таблицы отображается справа налево.

Рис. 2

Рис. 2. Применение direction к таблице

Браузеры

При добавлении атрибута direction со значением rtl к блоку с полосой прокрутки (например, <TEXTAREA>), браузер Internet Эксплорер, Файер фох и Нетscape отображают скроллинг слева, а Опера и Safari — справа.