direction

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

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

CSS	CSS2+
Значение по умолчанию	ltr
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	открыть в новой вкладке

Описание

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>

Демонстрация примера

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

Пример 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 отображают скроллинг слева, а Opera и Safari — справа.

direction

Категории

Последние комментарии

	Русский
	English