Атрибуты: Параметры формата отображения контента.

  Атрибуты стилей формата отображения контента применяются для изменения стартовых границ отображения контента в поле элемента тега.
  Горизонтальные стартовые границы.
  Атрибуты:
  direction - Устанавливает "зеркальное" изменение края начала отображения контента в поле определяемого элемента тега
  Край начала отображения может быть изменён для следующего содержимого Web-страницы:
  • Слов текстового контента в поле элемента тега в случае, если этот элемент связан с атрибутом стиля text-align: start.
  • Символов в словах текстового контента в поле элемента тега.
  • Полей "дочерних" элементов блочных тегов в поле "родительского" элемента тега.
  • Колонок таблицы в поле элемента тега TABLE.
  • Строк списка в полях элементов тегов UL и OL.
  • Полосы горизонтального скроллинга в поле элемента тега.

Формат:

  • direction:
      auto
      |ltr
      |rtl
      |initial
      |inherit
      |unset

Значения:

  • auto - Начало отображения определяется языковыми настройками браузера. (Умолчание).
  • ltr - Левый край устройства пользователя для начала отображения.
      Нормальное значение атрибута. Наследуется от элемента тега HTML (inherit на самом верхнем возможном уровне).
  • rtl - Правый край устройства пользователя для начала отображения.
      Изменения порядка слов и(или) порядка символов в словах при таком отображении зависит от кода символов в кодировке UNICOD, если такая зависимость не отменена атрибутом unicode-bidi: bidi-override.
      Так, например, слова из букв русского или латинского алфавитов и символы в этих словах не будут переставлены, "слова" из цифровых последовательностей переставятся, но символы в них нет, "слова" из последовательностей других символов и символы в них будут переставлены.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения атрибута стиля direction наследуются "дочерними" элементами для своего текстового контента.
  unicode-bidi - Устанавливает правила отображения текстового контента, в зависимости от кода в кодировке UNICOD его символов, для элемента тега связанного с атрибутом стиля direction: rtl.

Формат:

  • unicode-bidi:
      embed
      |bidi-override
      |normal
      |initial
      |inherit
      |unset

Значения:

  • embed - Привязка "зеркального" отображения, как для слов, так и для символов, к кодировке символов.
      Нормальное значение атрибута, оно наследуется от тега HTML (inherit на самом верхнем возможном уровне).
  • bidi-override - "Зеркально" отобразятся все слова и символы в них, вне зависимости от кодировки символов.
  • normal - "Нормализует" значение атрибута, устанавливая его таким, каким оно наследуется от элемента тега HTML.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения атрибута стиля unicode-bidi не наследуются "дочерними" элементами для своего текстового контента.
  Вертикальные стартовые границы.
  Атрибуты:
  [-webkit-]writing-mode - Устанавливает правила отображения строк текстового контента в поле определяемого элемента тега.

Формат:

  • [-webkit-]writing-mode:
      horizontal-tb
      |horizontal-bt
      |vertical-rl
      |vertical-lr
      |initial
      |inherit
      |unset

Значения:

  • horizontal-tb - Строки будут следовать по горизонтали друг за другом сверху-вниз. Следующая в HTML-коде строка отобразится ниже предыдущей (умолчание).
  • horizontal-bt - Строки будут следовать по горизонтали друг за другом снизу-вверх. Следующая в HTML-коде строка отобразится выше предыдущей.
  • vertical-rl - Строки повёрнутся по вертикали на 90 градусов и будут следовать по вертикали друг за другом справа-налево. Следующая в HTML-коде строка отобразится левее предыдущей.
  • vertical-lr - Строки повёрнутся по вертикали на 90 градусов и будут следовать по вертикали друг за другом слева-направо. Следующая в HTML-коде строка отобразится правее предыдущей.
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям, если таковые есть, в противном случае - к значениям по умолчанию.
  Значения атрибута стиля [-webkit-]writing-mode наследуются "дочерними" элементами для своего текстового контента.


Пример:

<STYLE>
  .field:hover #tabl { direction: rtl;}
  .field:hover #list { direction: rtl;}
  .field:hover #list #li3 { unicode-bidi: bidi-override}
  .field:hover #dvm { direction: rtl;}
  .field:hover #dvs { direction: rtl;}
</STYLE>
......

<FIELDSET class="field">
  <TABLE ID=tabl>
    <CAPTION>Таблица</CAPTION>
    <THEAD>
      <TR>
        <TH>Столбец 1</TH>
        <TH>Столбец 2</TH>
        <TH>Столбец 3</TH>
        <TH>Столбец 4</TH>
        <TH>Столбец 5</TH>
      </TR>
    </THEAD>
    <TBODY>
      <TR>
        <TD>Ячейка 1.1</TD>
        <TD>Ячейка 1.2</TD>
        <TD>Ячейка 1.3</TD>
        <TD>Ячейка 1.4</TD>
        <TD>Ячейка 1.5</TD>
      </TR>
      <TR>
        <TD>Ячейка 2.1</TD>
        <TD>Ячейка 2.2</TD>
        <TD>Ячейка 2.3</TD>
        <TD>Ячейка 2.4</TD>
        <TD>Ячейка 2.5</TD>
      </TR>
    </TBODY>
  </TABLE>
  <UL ID=list>
    <LI ID=li1>1 строка списка.</LI>
    <LI ID=li2>2 строка списка.</LI>
    <LI ID=li3>3 строка списка.</LI>
  </UL>
  <DIV ID=dvm>Родительский DIV
    <DIV ID=dvs>Дочерний DIV</DIV>
  </DIV>
</FIELDSET>
Пример атрибутов direction и unicode-bidi - наведите мышку.
Таблица
Столбец 1 Столбец 2 Столбец 3 Столбец 4 Столбец 5
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3 Ячейка 1.4 Ячейка 1.5
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3 Ячейка 2.4 Ячейка 2.5
  • 1 строка списка.
  • 2 строка списка.
  • 3 строка списка.
Родительский DIV
Дочерний DIV