Direction

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.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"">

Описание

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

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

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

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

Синтаксис

direction: ltr | rtl | inherit

Значения

ltr
Устанавливает направление слева направо.
rtl
Задает направление справа налево.
inherit
Наследует значение родителя.

Пример 1

<!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>

Пример 2

<!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>

Браузеры

При добавлении свойства direction со значением rtl к блоку с полосой прокрутки (например, <TEXTAREA>), браузер Internet Explorer, Firefox и Netscape отображают скроллинг слева, а Opera и Safari — справа.