direction

Вы можете приобрести локальную версию справочника по CSS в формате CHM или HTML

Браузер	Internet Explorer				Netscape		Opera				Safari			Firefox
Версия	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	CSS2
Значение по умолчанию	ltr
Наследуется	Да
Применяется	Ко всем элементам
Аналог HTML	<тег direction="ltr \| rtl"">
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.html#propdef-direction

Описание

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

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

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

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

Синтаксис

direction: ltr | rtl

Значения

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

Пример 1

HTML 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=windows-1251">
  <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 Explorer отображается слева.

Рис. 1

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

Пример 2

HTML 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=windows-1251">
  <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 Explorer, Firefox и Netscape отображают скроллинг слева, а Opera и Safari — справа.