9  Модель визуального форматирования

Содержание


9.1 Введение

Эта и дальнейшие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.

В модели визуального форматирования всякий элемент дерева документа генерирует нуль либо больше боксов в соответствии с моделью боксов. Конструкция этих боксов управляется:

Свойства, определённые в этой и следующих главах, используются и к непрерывным носителям, и к страничным носителям. В то же время, значения свойств полей варьируются при применении со страничным носителем (см. в страничной модели).

Модель визуального форматирования не определяет все аспекты форматирования (скажем, она не специфицирует алгорифм расстояний между буквами). Поведение соответствующих ПА может отличаться в вопросах форматирования.


9.1.1 Порт просмотра

ПА для непрерывных носителей традиционно предлагают пользователю порт просмотра (окно либо иную область просмотра на экране), в котором пользователь видит документ. ПА могут изменять внешний вид документа, если порт просмотра изменил размеры (см. начальный содержащий блок). Если порт просмотра поменьше, чем первоначальный содержащий блок документа, ПА должен предоставить механизм прокрутки. Имеется не менее одного порта просмотра в канве, но ПА могут отображать больше чем одну канву (т.е. предоставлять разные виды того же самого документа).


9.1.2 Содержащие блоки

В CSS2 многие варианты позиционирования и размеры вычисляются касательно кромки прямоугольного бокса, называемого содержащий блок. Обыкновенно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс "устанавливает" содержащий блок для своих потомков. Фраза "блок, содержащий бокс" обозначает "блок, в котором бокс находится", а не блок, генерирующий бокс.

Каждый бокс имеет позицию касательно содержащего блока, но не лимитирован этим блоком и может вызвать переполнение.

Корневой элемент дерева документа генерирует бокс, тот, что служит начальным содержащим блоком для дальнейшего итога.

Ширина исходного содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это качество имеет значение 'auto', ПА предоставляет исходное значение ширины (скажем, ПА использует нынешнюю ширину порта просмотра).

Высота исходного содержащего блока может быть специфицирована свойством 'height' корневого элемента. Если это качество имеет значение 'auto', высота содержащего блока возрастает, дабы адаптироваться к содержимому документа.

Начальный содержащий блок не может быть позиционирован либо всплывать (т.е. ПА игнорируют свойства 'position' и 'float' корневого элемента).

Детали того, как высчитываются размеры содержащего блока, описаны в следующей главе.


9.2  Управление генерацией боксов

Последующие разделы описывают типы боксов, которые могут генерироваться в CSS2. Тип бокса воздействует отчасти на его (бокса) поведение в модели визуального форматирования. Качество 'display', описанное ниже, специфицирует тип бокса.


9.2.1 Элементы яруса блока и боксы блока

Элементы яруса блока это элементы документа-источника, визуально отформатированные как блоки (скажем, параграфы). Разные значения свойства 'display' создают элемент яруса блока: 'block', 'list-item', 'compact', 'run-in' (не неизменно; см. компактные и втягивающиеся боксы) и 'table'.

Элементы яруса блока генерируют основной бокс блока, и только он содержит боксы блоков. Стержневой бокс блока устанавливает содержащий блок для боксов-потомков и сгенерированного содержимого и является также боксом, участвующим в всякий схеме позиционирования. Основные боксы блока действуют в контексте форматирования блока.

Некоторые элементы яруса блока генерируют добавочные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти добавочные боксы размещаются касательно основного бокса.

Анонимные боксы блока

В этом документе:

<DIV>
  Some text
  <P>More text
</DIV>
(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-яруса, и яруса блока. Дабы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.

diagram showing the three
boxes for the example above   [D]

На диаграмме изображены три бокса, один из которых неизвестный, в примере - верхний.

Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя иной бокс блока (как P), тогда мы принуждаем его иметь боксы блока только внутри себя, перенеся всякие инлайн-боксы в неизвестный бокс блока.

Пример(ы):

Эта модель будет применена в дальнейшем примере, если данные правила:

/* Примечание: ПАгенты HTML могут не рассматривать эти правила */
BODY { display: inline }
P    { display: block }

будут использованы в данном документе HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Неизвестный текст, прерываемый блоком.</TITLE>
</HEAD>
<BODY>
Анонимный текст до P.
<P>Содержимое элемента P.</>
Анонимный текст позже P.
</BODY>

Элемент BODY содержит отрывок (C1) неизвестного текста, позже которого идут элемент яруса блока и 2-й отрывок неизвестного текста (C2). В итоге получим неизвестный бокс блока для BODY, содержащий неизвестный бокс блока вокруг C1, бокс блока P и 2-й неизвестный бокс блока вокруг C2.

Свойства неизвестных боксов наследуются из содержащего неанонимного бокса (в примере: из DIV). Ненаследуемые свойства имеют свои исходные значения. Скажем, шрифт неизвестного бокса наследуется из DIV, но поля имеют значения 0.


9.2.2 Инлайн-элементы и инлайн-боксы

Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (скажем, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Разные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не неизменно; см. компактные и втягивающиеся боксы). Элементы инлайн-яруса (встроенные) генерируют инлайн-боксы.

Инлайн-боксы могут принимать участие в разных контекстах форматирования:

Анонимные инлайн-боксы

В таком документе:

<P>Определенный <EM>выделенный</em> текст.</P>

элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "выделенный" - это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы ("Некоторый" и "текст") являются инлайн-боксами, сгенерированными элементом яруса блока (P). Последние именуются неизвестными инлайн-боксами, от того что они не имеют ассоциированного инлайн-элемента.

Такие неизвестные инлайн-боксы наследуют наследуемые свойства своего родительского бокса яруса блока. Ненаследуемые свойства получают свои исходные значения. В примере - цвет неизвестных исходных боксов наследуется из  P, но фон остаётся прозрачным.

Если из контекста ясно, какой тип неизвестных боксов подразумевается, то и боксы инлайн, и боксы яруса блока именуются в данной спецификации неизвестными боксами.

Имеются и другие типы неизвестных боксов, возникающие при форматировании таблиц.


9.2.3 Боксы compact/компактные

Бокс compact ведёт себя так:

Compact-бокс позиционируется в поле дальнейшим образом: он находится вне (слева либо справа от) первого строчного бокса блока, но влияет на расчёт высоты строчного бокса. Качество 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса касательно строчного бокса. Позиция compact-бокса по горизонтали - неизменно в поле бокса блока.

Элемент, тот, что не может быть отформатирован в пределах одной строчки, не может размещаться в поле дальнейшего блока. Скажем, элемент 'compact' в HTML, тот, что содержит элемент BR, неизменно будет форматироваться как бокс блока (принимая для BR жанр по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле зачастую огромнее подойдёт качество 'float'.

Следующий пример иллюстрирует compact-бокс:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A compact box example</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Short
        <DD><P>Description goes here.
      <DT>too long for the margin
        <DD><P>Description goes here.
    </DL>
  </BODY>
</HTML>

Этот пример может выглядеть позже форматирования так:

short    Description goes here

too long for the margin
         Description goes here

Свойство 'text-align' дозволено применять для выравнивания compact-элемента внутри поля: у левого края поля ('left'), у правого края поля ('right') либо по центру поля ('center'). Значение 'justify' не используется и обрабатывается либо как 'left', либо как 'right', в зависимости от 'direction'/направления элемента блока, в поле которого форматируется compact-элемент ('left', если направление - 'ltr', 'right', если направление 'rtl').

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.


9.2.4 Втягивающиеся боксы (run-in)

Бокс run-in ведёт себя так:

Бокс 'run-in' применяется для run-in-заголовков, как в этом примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример бокса run-in</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>Заголовок run-in.</H3>
    <P>И параграф текста,
       дальнейший за ним.
  </BODY>
</HTML>

Этот пример может форматироваться так:

  Заголовок run-in. И
  параграф текста, 
  дальнейший за ним.

Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.


9.2.5 Свойство 'display'

'display'
Значение:inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Начальное:inline
Применяется:  все элементы
Наследуется:нет
Процентное:N/A
Носитель:все

Значения этого свойства имеют дальнейший толк:

block
Элемент генерирует стержневой бокс блока.
inline
Элемент генерирует один либо больше инлайн-боксов.
list-item
Элемент (скажем, LI в HTML) генерирует стержневой бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки.
marker
Объявляет генерируемое содержимое до либо позже бокса-маркёра. Это значение должно применяться только совместно с псевдоэлементами :before и :after, присоединёнными к элементам яруса блока. В иных случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры.
none
Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.

Обратите внимание, что отображение 'none' не создаёт заметный бокс; боксы вообще не создаются. CSS содержит механизмы, делающие допустимым генерацию элементом бокса в структуре форматирования, тот, что влияет на конструкцию форматирования, но заметен. См. детали в разделе Видимость.

run-in и compact
Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, основываются на окончательном ранге боксов (ярус инлайн либо блока). Скажем, качество 'white-space' используется только тогда, когда бокс получает ярус блока.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption
При установке этих значений, элемент ведёт себя как элемент таблицы (ограничения описаны в главе Таблицы).

Заметьте, что, правда начальное значение  'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.

Пример(ы):

Несколько примеров свойства 'display':

P   { display: block }
EM  { display: inline }
LI  { display: list-item } 
IMG { display: none }      /* Не выводить изображения */

Соответствующие ПА HTML могут игнорировать качество 'display'.


9.3 Схемы позиционирования

В CSS2 бокс может находиться в различных слоях в соответствии со схемами позиционирования:

  1. Normal flow/Нормальное расположение. В CSS2 типичное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока либо инлайн и позиционирование compact и run-in боксов.
  2. Floats/Поплавки. В модели поплавка бокс вначале накладывается в соответствии с типичным расположением, после этого изымается из расположения и сдвигается налево либо вправо, насколько допустимо. Содержимое может обтекать по стороне "всплывания" поплавка.
  3. Абсолютное позиционирование. В модели безусловного позиционирования бокс удаляется из типичного расположения всецело (это не действует на дальнейшие родные элементы) и получает позиционирование касательно содержащего блока.
Примечание. Схемы позиционирования CSS2 помогают авторам сделать документы больше доступными, разрешая чураться трюков разметки (скажем, заметных изображений), используемых для создания результатов отображения.


9.3.1 Выбор схемы позиционирования: качество 'position'

Свойства 'position' и 'float' определяют, какой из алгорифмов позиционирования CSS2 применяется для расчёта позиции бокса.

'position'
Значение:static | relative | absolute | fixed | inherit
Начальное:static
Применяется:  ко каждым элементам, но не к генерируемому содержимому
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Значения имеют дальнейший толк:

static
Бокс является типичным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не используются.
relative
Позиция бокса высчитывается в соответствии с нормальным расположением. После этого бокс смещается относительно типичного расположения. Если бокс В позиционирован касательно, расположение дальнейшего бокса вычисляется так, как если бы бокс В не имел смещения.
absolute
Позиция бокса (и допустимые размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение касательно бокса содержащего блока. Безусловно позиционированные боксы изымаются из типичного обтекания. Это значит, что они не влияют на итог последующих родных элементов. Также, правда абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.
fixed
Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется касательно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется касательно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, скажем). Авторам может потребоваться специфицировать 'fixed' методом, не зависящим от носителя. Скажем, автор может захотеть, дабы бокс оставался в верхней части порта просмотра экрана, но не вверху всякой печатаемой страницы. Две такие спецификации дозволено поделить, применяя правило @media, как тут:

Пример(ы):

@media screen { 
  H1#first { position: fixed } 
}
@media print { 
  H1#first { position: static }
}

9.3.2 Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left'

Элемент именуется позиционированным, если его качество 'position' имеет значение, хорошее от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

'top'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется:  к позиционируемым элементам
Наследуется:нет
Процентное:относительно высоты содержащего блока
Носитель:визуальный

Это качество специфицирует, насколько смещён вниз верхний край содержимого бокса касательно верхнего края содержащего блока.

'right'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется:  к позиционируемым элементам
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Это качество специфицирует, насколько смещён налево правый край содержимого бокса касательно правого края содержащего блока.

'bottom'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется:  к позиционируемым элементам
Наследуется:нет
Процентное:относительно высоты содержащего блока
Носитель:визуальный

Это качество специфицирует, насколько смещён вверх нижний край содержимого бокса касательно низа содержащего блока.

'left'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется:  к позиционируемым элементам
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Это качество специфицирует, насколько смещён вправо левый край содержимого бокса касательно левого края содержащего блока.

Значения для этих четырёх свойств имеют дальнейший толк:

<length>
Смещением является расстояние от соответствующего края.
<percentage>
Смещением является процент ширины содержащего блока (для 'left' либо 'right') либо высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована очевидно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'.
auto
Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение 'auto'. См. также разделы ширина и высота абсолютно позиционируемых, незамещаемых элементов.

Для абсолютно позиционируемых боксов - смещения являются относительными к содержащему блоку бокса. Для касательно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся типичное расположение, а после этого - смещение от этой позиции в соответствии с вышеуказанными свойствами).


9.4 Нормальное расположение

Боксы при типичном обтекании относятся к контексту форматирования, тот, что может быть яруса блока и инлайн, но не тем и иным единовременно. Боксы блока находятся в контексте форматирования блока. Инлайн-боксы находятся в контексте инлайн-форматирования.


9.4.1 Контекст форматирования блока

В контексте форматирования блока боксы устанавливаются один за иным, вертикально, начиная от верха содержащего блока. Вертикальное расстояние между двумя родными боксами определяется свойством 'margin'. Горизонтальные поля между смежными боксами блока в контексте форматирования блока сжимаются.

В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево - касается правый край). Это правильно даже в случае с поплавками (правда область содержимого может усекаться из-за поплавков).

Информацию о обрывах страниц в страничных носителях см. в разделе допустимые обрывы страниц.


9.4.2 Контекст инлайн-форматирования

В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за иным, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполнение рассматриваются как отношения между боксами. Боксы могут быть выровнены по вертикали несколькими методами: могут быть выровнены их нижние либо верхние края либо базовые линии текста внутри них. Прямоугольная область, содержащая боксы, которые образуют строку, именуется строчный бокс.

Ширина строчного бокса определяется содержащим блоком. Высота строчного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс неизменно имеет высоту, довольную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, скажем, боксы выровнены так, что базовые линии выстроены). Если высота бокса В поменьше, чем высота строчного бокса, содержащего его, то вертикальное выравнивание В внутри строчного бокса определяется свойством 'vertical-align'.

Если несколько инлайн-боксов не входят по горизонтали в один строчный бокс, они распределяются на два либо больше вертикально упакованных строчных бокса. Таким образом, параграф будет вертикальным стеком из строчных боксов. Строчные боксы упакованы по вертикали без распределения и никогда не перекрываются.

Вообще, левый край строчного бокса касается левого края его содержащего блока, и правый край касается правого края его содержащего блока. В то же время, боксы-поплавки могут возникать между краем содержащего блока и краем строчного блока. Таким образом, правда строчные боксы в том же самом контексте инлайн-форматирования обыкновенно имеют ту же самую ширину (что и содержащий блок), они могут иметь и иную ширину из-за поплавков, сокращающих горизонтальное пространство. Строчные боксы в том же самом контексте инлайн-форматирования традиционно различаются по высоте (скажем, одна строка может содержать высокое изображение, а другие строки - только текст).

Если суммарная ширина инлайн-боксов в строке поменьше, чем ширина строчного бокса, содержащего их, то их разделение по горизонтали внутри строчного бокса определяется свойством 'text-align'. Если это качество имеет значение 'justify', ПА может уплотнить инлайн-боксы.

Поскольку инлайн-бокс не может превысить ширину строчного бокса, длинные инлайн-боксы разделяются на несколько боксов, и эти боксы распределяются на несколько строчных боксов. Если инлайн-бокс разделён, то поля, рамки и заполнение не имеют визуального результата в тех местах, где происходит распределение. Форматирование полей, рамок и заполнения может не быть определено всецело, если распределение происходит внутри двунаправленного внедрения.

Инлайн-боксы могут также быть поделены на несколько боксов внутри одного строчного бокса из-за двунаправленной обработки текста.

Вот пример конструкции инлайн-боксов. Дальнейший параграф (сделанный элементом Р яруса блока в HTML) содержит неизвестный текст, распределённый между элементами EM и STRONG:

<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - неизвестные:

Чтобы сформатировать параграф, ПА вставляет пять боксов в строчный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок довольно широк, все инлайн-боксы войдут в один строчный бокс:

Several emphasized words appear in this sentence, dear.

если нет, инлайн-боксы будут поделены и распределены по нескольким строчным боксам. Предшествующий параграф может быть разделён так:

Several emphasized words appear
in this sentence, dear.
либо так:
Several emphasized  
words appear in this 
sentence, dear.

В предыдущем примере бокс EM был разделён на два бокса EM (назовём их "split1" и "split2"). Поля, рамки, заполнение либо текстовый орнамент не имеют видимого результата позже split1 либо до split2.

Разгляди дальнейший пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

В зависимости от ширины P, боксы могут распределиться так:

Image illustrating the effect of line breaking on the
display of margins, borders, and padding.   [D]


9.4.3 Относительное позиционирование

После того, как бокс размещен в соответствии с нормальным расположением, он может быть сдвинут касательно этой позиции. Это именуется относительным позиционированием. Смещение бокса (B1) таким методом не окажет воздействия на бокс (B2), дальнейший за ним: B2 получит такую позицию, как словно B1 не смещён и B2 не перемещается позже использования смещения B1. Это полагает, что относительное позиционирование может вызывать взаимное перекрытие боксов.

Относительно позиционированные боксы сберегают свои типичные размеры и прорисовку, включая обрывы строк и заполнение, изначально зарезервированные за ними. Касательно позиционированный бокс устанавливает новейший содержащий блок для типичной прорисовки дочерних и позиционированных потомков.

Относительно позиционированный бокс генерируется, когда качество 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.

Динамическое перемещение боксов, позиционированных касательно, может создавать результаты анимации в среде скриптов (см. также качество 'visibility'). Относительное позиционирование дозволено применять также как всеобщую форму под- и надиндексов, за исключением того, что высота строки не устанавливается механически при рассмотрении позиционирования. См. добавочно изложение вычисления высоты строки.

Примеры относительного позиционирования есть в разделе Сравнение типичного позиционирования, поплавков и безусловного позиционирования.


9.5 Поплавки/Floats

Поплавок это бокс, тот, что "всплывает" (смещается) налево либо вправо на нынешней строке. Самое увлекательное в поведении поплавка (либо "всплывающего", либо "плавающего" бокса) то, что содержимое может обтекать его по сторонам (либо это может быть запрещено свойством 'clear'). Содержимое обтекает справа бокс, всплывающий налево, и слева - бокс всплывающий вправо.

Дальше следует вступление в позиционирование поплавков и обтекание содержимого; точные правила, руководящие поведением поплавков, даны в изложении свойства 'float'.

Всплывающий бокс обязан иметь очевидно установленную ширину (назначенную свойством 'width', либо свою внутреннюю ширину - в случае замещаемых элементов). Всякий всплывающий бокс становится боксом блока, тот, что сдвигается налево либо вправо, пока его внешний край не коснётся края содержащего блока либо внешнего края иного поплавка. Верх всплывающего бокса выравнивается с верхом нынешнего строчного бокса (либо низом предшествующего бокса блока, если отсутствует строчный бокс). Если для поплавка не хватает горизонтального пространства на нынешней строке, он сдвигается вниз строка за строкой, пока строка не получит довольно пространства для него.

Пока поплавок не всплыл, непозиционированные боксы блока, сделанные до и позже всплывающего бокса, всплывают вертикально, как словно поплавка не существует. Впрочем строчные боксы, сделанные сразу позже поплавка, уменьшаются, дабы дать пространство для всплывающего бокса. Всякое содержимое на нынешней строке до всплывающего бокса перерисовывается на первой доступной строке с противоположной стороны поплавка.

Несколько поплавков могут быть смежными, и эта модель используется также к смежным поплавкам на той же строке.

Пример(ы):

Следующее правило вызывает всплывание налево всех боксов IMG с  class="icon"  (и устанавливает левое поле в '0'):

IMG.icon { 
  float: left;
  margin-left: 0;
}

Рассмотрим следующие HTML и таблицу жанров:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Float example</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="This image will illustrate floats">
       Some sample text that has no other...
  </BODY>
</HTML>

IMG-бокс всплывает налево. Дальнейшее содержимое форматируется справа от поплавка, начиная с той же строки, где находится поплавок. Строчные боксы справа от поплавка укорачиваются из-за присутствия поплавка, но имеют свою "нормальную" ширину (как в содержащем блоке, установленном элементом P) позже поплавка. Данный документ может быть сформатирован так:

Image illustrating how floating boxes interact with
margins.   [D]

Форматирование могло бы быть верно таким же, если бы документ был дальнейшим:

<BODY>
  <P>Some sample text 
  <IMG src=img.gif alt="This image will illustrate floats">
           that has no other...
</BODY>

поскольку содержимое слева от поплавка замещается поплавком и обтекает его вниз по его правой стороне.

Поля всплывающих боксов никогда не сжимаются полями смежных боксов. Таким образом, в предыдущем примере вертикальные поля не сжимаются между боксом P и всплывающим IMG-боксом.

Поплавок может перекрывать другие боксы при типичном позиционировании (скажем, когда типично позиционированный бокс, дальнейший за поплавком, имеет негативные поля). Когда инлайн-бокс перекрывается поплавком, содержимое, фон и рамки инлайн-бокса отображаются впереди поплавка. Если блок бокса перекрывается, фон и рамки бокса блока отображаются позади поплавка и видны только там, где бокс прозрачен. Содержимое бокса блока отображается спереди от поплавка.

Пример(ы):

Вот иная иллюстрация, показывающая, что происходит, когда поплавок перекрывает рамки элемента с типичным всплыванием.

Image showing a floating image
that overlaps the borders of two paragraphs: the borders are
interrupted by the image.   [D]

Всплывающее изображение скрывает рамки перекрываемого бокса блока.

Следующий пример иллюстрирует применение свойства 'clear' для предотвращения всплывания содержимого позже поплавка.

Пример(ы):

При таком правиле:

P { clear: left }

форматирование может выглядеть так:

Image showing a floating
image and the effect of 'clear: left' on the two paragraphs.   [D]

Оба параграфа установлены в 'clear: left', что "выталкивает вниз" 2-й параграф в расположение под поплавком - его верхнее поле растягивается, дабы исполнить это (см. качество 'clear').

9.5.1 Позиционирование поплавка: качество 'float'

'float'
Значение:left | right | none | inherit
Начальное:none
Применяется:  ко каждому, помимо позиционированных элементов и генерируемого содержимого
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это качество специфицирует, должен ли бокс всплывать налево, вправо либо не всплывать вообще. Оно может быть установлено для элементов, генерирующих боксы, которые не позиционированы абсолютно.
Значения этого свойства имеют дальнейший толк:

left
Элемент генерирует бокс блока, всплывающий налево. Содержимое обтекает по правой стороне бокса, начиная от верха (субъект свойства 'clear'). 'display' игнорируется, если только оно не имеет значения 'none'.
right
То же, что 'left', но содержимое обтекает по левой стороне бокса, начиная от верха.
none
Бокс не всплывает.

Вот точные правила, руководящие поведением поплавка:

  1. Левый внешний край всплывающего налево бокса не может быть слева от левого края его содержащего блока. Схожее правило действует для элементов, всплывающих вправо.
  2. Если нынешний бокс всплывает налево и имеются другие всплывающие налево боксы, сгенерированные элементами в документе-источнике ранее, тогда для всякого такого предшествующего бокса либо левый внешний край нынешнего бокса обязан быть справа от правого внешнего края предшествующего бокса, либо его верх обязан быть ниже, чем низ предшествующего бокса. Схожее правило действует для боксов, всплывающих вправо.
  3. Правый внешний край всплывающего налево бокса не может быть справа от левого внешнего края какого-нибудь всплывающего вправо бокса, находящегося справа от него. Схожие правила действуют для элементов, всплывающих вправо.
  4. Верхний внешний край всплывающего бокса не может быть выше, чем верх его содержащего блока.
  5. Верхний внешний край всплывающего бокса не может быть выше, чем верхний внешний край всякого всплывающего бокса блока, сгенерированного элементом ранее в документе-источнике.
  6. Верхний внешний край всплывающего бокса элемента не может быть выше, чем верх всякого строчного бокса, содержащего бокс, сгенерированный элементом ранее в документе-источнике.
  7. Всплывающий налево бокс, имеющий слева от себя иной всплывающий налево бокс, не может иметь свой правый внешний край справа от правого края своего содержащего блока. (Говоря шире: левый поплавок не может находиться у правого края, если только он теснее не находится слева так вдалеке, насколько это допустимо.) Схожее правило действует для элементов, всплывающих вправо.
  8. Всплывающий бокс должен быть размещён так высоко, насколько это допустимо.
  9. Всплывающий налево бокс обязан быть размещён так вдалеке налево, насколько это допустимо, а всплывающий вправо бокс обязан быть размещён так вдалеке вправо, насколько это допустимо. Больше высока позиция имеет преобладание перед позицией, идущей дальше влево/вправо.


9.5.2 Управление расположением позже поплавка: качество 'clear'

'clear'
Значение:none | left | right | both | inherit
Начальное:none
Применяется:  к элементам яруса блока
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это качество указывает, какие стороны бокса(ов) элемента не могут быть смежными с ранее всплывшим боксом. (Может быть такое, что элемент сам имеет всплывающих потомков; качество 'clear' не оказывает на них воздействия.)

Это качество может быть специфицировано только для элементов уровня блока (включая поплавки). Для компактных и втягивающихся боксов это качество используется к окончательному боксу блока, к которому суперкомпактный либо втягивающийся бокс принадлежит.

Значения имеют дальнейший толк при использовании к невсплывающим боксам блока:

left
Верхнее поле генерируемого бокса возрастает настоль, дабы верхний край рамки был ниже нижнего внешнего края всякого всплывающего налево бокса, являющегося итогом действия предыдущих элементов в документе-источнике.
right
Верхнее поле генерируемого бокса возрастает настоль, дабы верхний край рамки был ниже нижнего внешнего края всякого всплывающего вправо бокса, являющегося итогом действия предыдущих элементов в документе-источнике.
both
Генерируемый бокс перемещается ниже всех всплывающих боксов элементов, появившихся ранее в документе-источнике.
none
Нет ограничений на позицию бокса касательно поплавков.

Если качество установлено на всплывающие элементы, итогом будет модификация правил позиционирования поплавка. Прибавляется дополнительное условие (#10):


9.6 Абсолютное позиционирование

В модели безусловного позиционирования бокс смещается очевидно касательно своего содержащего блока. Он всецело удаляется из типичного позиционирования (не влияет на последующих родственников). Безусловно позиционированный бокс устанавливает новейший содержащий блок для типично позиционируемых дочерних боксов и позиционируемых потомков. В то же время, содержимое безусловно позиционированных элементов не всплывает вокруг других боксов. Эти элементы могут либо могут не закрывать собой содержимое иного бокса, в зависимости от уровней в стэке у перекрываемых боксов.

Ссылки в данной спецификации на абсолютно позиционированный элемент (либо его бокс) подразумевают, что качество 'position' элемента имеет значение 'absolute' либо 'fixed'.


9.6.1 Фиксированное позиционирование

Фиксированное позиционирование это подкатегория безусловного позиционирования. Исключительное различие в том, что для фиксированно позиционированного бокса содержащий блок устанавливается портом просмотра.
Для непрерывных носителей фиксированные боксы не перемещаются при прокрутке документа. В этом смысле они схожи на фиксированные фоновые изображения.
Для страничных носителей боксы с фиксированной позицией повторяются на всей странице. Это применяется для размещения, к примеру, подписи внизу всякой страницы.

Авторы могут применять фиксированное позиционирование для создания фрэймоподобных презентаций. Разглядим следующую конструкцию фрэймов:

Image illustrating a frame-like layout with position='fixed'.   [D]

Этого дозволено добиться с подмогой такого документа HTML и таблицы жанров:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Документ с фрэймами в CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Нужен дальше для процентной высоты */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> ...  </DIV>
    <DIV id="sidebar"> ...  </DIV>
    <DIV id="main"> ...  </DIV>
    <DIV id="footer"> ...  </DIV>
  </BODY>
</HTML>

9.7 Соотношение между 'display', 'position' и 'float'

Три свойства, влияющие на генерацию и конструкцию бокса -- 'display', 'position' и 'float' -- взаимодействуют так:

  1. Если 'display' имеет значение 'none', ПА обязаны игнорировать 'position' и 'float'. В этом случае элемент не генерирует бокса.
  2. Иначе, если 'position' имеет значение 'absolute' либо 'fixed', 'display' установлен в 'block', а 'float' установлен в 'none'. Позиция бокса будет определяться свойствами 'top', 'right', 'bottom' и 'left' и содержащим блоком бокса.
  3. Иначе, если 'float' имеет значение не 'none', 'display' установлен в 'block', и бокс всплывает.
  4. Иначе, оставшиеся свойства 'display' используются так, как специфицированы.

Примечание. CSS2 не специфицирует поведение конструкции, если значения этих свойств изменяются скриптами. Скажем, что произойдёт, если элемент, имеющий 'width: auto' изменит позицию? Будет ли перерисовано содержимое либо форматирование останется изначальным? Результат находится за пределами данного документа, и схоже, что такое поведение отличалось для ранних реализаций CSS2.


9.8 Сравнение типичного расположения, поплавков и безусловного позиционирования

Чтобы проиллюстрировать разницу между типичным и относительным позиционированием, поплавками и безусловным позиционированием, мы предлагаем серию примеров на базе дальнейшего фрагмента HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Сопоставление схем позиционирования</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id="outer"> Start of outer contents.
      <SPAN id="inner"> Inner contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

Для этого документа мы принимаем следующие правила:

BODY { display: block; line-height: 200%; 
       width: 400px; height: 400px }
P    { display: block }
SPAN { display: inline }

Окончательные позиции боксов, генерируемых внешними и внутренними элементами, разны в всем примере. В всей иллюстрации числа слева от иллюстрации обозначают позицию нормального позиционирования строк. (Примечание: иллюстрации применяют разные горизонтальные и вертикальные масштабы.)


9.8.1 Типичное расположение

Рассмотрим следующие объявления CSS для outer и inner, которые не изменяют нормального расположения боксов:

#outer { color: red }
#inner { color: blue }

Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следственно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то сходственное:

Image illustrating the normal flow of text between parent and sibling boxes.   [D]

9.8.2 Относительное позиционирование

Чтобы увидеть действие относительного позиционирования, мы специфицируем:

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

Текст размещен типично до элемента outer. Текст outer после этого всплывает в своей типичной позиции и размерах в конце строки 1. После этого инлайн-боксы, содержащие текст (распределённый на три строки), сдвигаются совместно на '-12px' (вверх).

Содержание inner как дочернего от outer было бы типично расположено сразу позже слов "of outer contents" (на строке 1.5). Впрочем содержимое inner само смещено касательно содержимого outer на '12px' (вниз), обратно на свою изначальную позицию на строке 2.

Обратите внимание, что на содержимое, следующее позже outer, относительное позиционирование outer не влияет.

Image illustrating the effects of relative positioning on a
box's content.   [D]

Заметьте также, что, имея смещение для outer  '-24px', текст outer и текст тела могут быть перекрыты.


9.8.3 Обтекание бокса

Теперь разглядим результат от всплывания текста элемента inner вправо при применении следующих правил:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

Текст типично размещен до бокса inner, тот, что вытолкнут из расположения и всплыл к правому полю (его 'width' установлено очевидно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.

Image illustrating the effects of floating a box.   [D]

Чтобы увидеть действие свойства 'clear', мы добавим в пример родственные элементы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Сопоставление схем позиционирования II</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id=outer> Start of outer contents.
      <SPAN id=inner> Inner contents.</SPAN>
      <SPAN id=sibling> Sibling contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

Следующие правила:

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

заставляют бокс inner всплывать вправо, как и прежде, а остальной текст документа - всплывать в незанятом пространстве:

Image illustrating the effects of floating a box without
setting the clear property to control the flow of text around the
box.   [D]

Однако, если качество 'clear' родственного элемента установлено в 'right' (т.е. генерируемый родственный бокс не займёт позицию справа от всплывающего бокса), родственное содержимое начнёт располагаться ниже поплавка:

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.   [D]

9.8.4 Безусловное позиционирование

Наконец, мы разглядим действие абсолютного позиционирования. Вот объявления CSS для outer и inner:

#outer { 
    position: absolute; 
    top: 200px; left: 200px; 
    width: 200px; 
    color: red;
}
#inner { color: blue }

которые позиционируют верх бокса outer касательно его содержащего блока. Содержащий блок для позиционируемого бокса устанавливается ближайшим позиционированным прародителем (либо, если таковой не существует, начальным содержащим блоком, как в нашем примере). Верхняя сторона бокса outer на '200px' ниже верха содержащего блока, а левая сторона - на '200px' от левой стороны. Дочерний бокс outer'а позиционирован типично касательно родителя.

Image illustrating the effects of absolutely positioning a box.   [D]

Следующий пример покажет безусловно позиционированный бокс, являющийся дочерним от касательно позиционированного бокса. Правда родительский бокс outer не имеет смещения, установка его свойства 'position' в 'relative' обозначает, что данный бокс может служить как содержащий блок для позиционированных потомков. От того что бокс outer это инлайн-бокс, разделённый на несколько строк, край верха первого инлайн-бокса и левый край (обозначенный толстой пунктирной линией на рисунке ниже) служат как ссылки для смещений  'top' и 'left'.

#outer { 
  position: relative; 
  color: red 
}
#inner { 
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

В итоге получится приблизительно так:

Image illustrating the effects of absolutely positioning a
box with respect to a containing block.   [D]

Если мы не позиционируем бокс outer:

#outer { color: red }
#inner {
  position: absolute; 
  top: 200px; left: -100px; 
  height: 130px; width: 130px; 
  color: blue;
}

содержащий блок для inner станет начальным содержащим блоком (в нашем примере). Дальнейшая иллюстрация показывает, где в этом случае окажется бокс inner.

Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent.   [D]

Относительное и безусловное позиционирование может применяться для выполнения смены баннеров, как показано в дальнейшем примере. Такой документ:

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

может дать в итоге приблизительно это:

Image illustrating the use of floats to create a changebar effect.   [D]

Сначала параграф (стороны содержащего блока которого показаны на иллюстрации) размещен типично. После этого он смещается на '10px' от левого края содержащего блока (таким образом, правое поле в '10px' резервируется для полагаемого смещения). Два дефиса, работающие как сменяющиеся баннеры, изымаются из расположения и позиционируются на нынешней строке (от того что 'top: auto'), на '-1em' от левого края своего содержащего блока (установленного P в свою окончательную позицию). В итоге сменяющиеся баннеры "всплывают" слева от нынешней строки.


9.9 Слои

В последующих разделах выражение "спереди от" обозначает ближе к пользователю, смотрящему на экран.

В CSS2 всякий бокс имеет позицию в трёх измерениях. В дополнение к позиции касательно вертикали и горизонтали, боксы расположены по "z-axis/оси z" и форматируются один над иным. Позиции по оси z обыкновенно рассматриваются, когда боксы перекрываются визуально. В этом разделе обсуждается, как боксы дозволено позиционировать касательно оси z.

Каждый бокс принадлежит к контексту стэка. Весь бокс в данном контексте стэка имеет целочисленный уровень стэка, являющийся позицией бокса по оси z касательно других боксов того же самого контекста стэка. Боксы с огромным ярусом стэка неизменно форматируются перед боксами с меньшим ярусами стэка. Боксы могут иметь негативные значения яруса стэка. Боксы, имеющие тот же ярус в контексте стэка, упакованы снизу-вверх в соответствии с порядком дерева документа.

Корневой элемент создаёт корневой контекст стэка, но другие элементы могут устанавливать локальные контексты стэка. Контексты стэка наследуются. Локальный контекст стэка первичен; боксы других контекстов стэка не могут возникать между его боксами.

Элемент, устанавливающий локальный контекст стэка, генерирует бокс, тот, что имеет два яруса стэка: один для контекста создаваемого стэка (неизменно '0') и 2-й для контекста стэка, к которому он (бокс) принадлежит (задаваемый свойством 'z-index').

Бокс элемента имеет тот же ярус стэка, что и его бокс-родитель, если только не задан иной ярус стэка свойством 'z-index'.


9.9.1 Спецификация яруса в пакете слоёв: качество 'z-index'

'z-index'
Значение:auto | <integer> | inherit
Начальное:auto
Применяется:  к позиционированным элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Для позиционированных боксов качество 'z-index' специфицирует:

  1. Уровень стэка бокса в нынешнем контексте стэка.
  2. Устанавливает ли бокс локальный контекст стэка.

Значения имеют дальнейший толк:

<integer>
Это целое число - ярус стэка сгенерированного бокса в нынешнем контексте стэка. Бокс также устанавливает локальный контекст стэка со своим ярусом в стэке '0'.
auto
Уровень стэка сгенерированного бокса в нынешнем контексте стэка тот же, что и у бокса-родителя. Бокс не устанавливает новейший локальный контекст стэка.

В дальнейшем примере ярусы стэка боксов (именованных своими признаками "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Ярус стэка для "text2" наследуется от корневого бокса. Остальные - специфицируются свойством 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Z-позиционирование</TITLE>
    <STYLE type="text/css">
      .pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile" 
           src="butterfly.gif" alt="A butterfly image"
           style="z-index: 1">

    <DIV id="text1" class="pile" 
         style="z-index: 3">
      This text will overlay the butterfly image.
    </DIV>

    <DIV id="text2">
      This text will be beneath everything.
    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2">
      This text will underlay text1, but overlay the butterfly image
    </DIV>
  </BODY>
</HTML>

Этот пример показывает представление прозрачности. Поведение по умолчанию бокса - разрешать боксам, находящимся сзади, быть видимыми через прозрачные области своего содержимого. В примере всякий бокс прозрачно накладывается на боксы ниже себя. Это поведение может быть переопределено путём применения одного из существующих свойств фона.


9.10 Направление текста: свойства 'direction' и 'unicode-bidi'

Символы в некоторых видах письма записываются справа налево. В некоторых документах, исключительно на арабском и иудейском, и в некоторых контекстах смешивания языков текст в одиночном (визуально отображаемом) блоке может возникать со смешанным направлением письма. Данный феномен именуется bidirectionality\двунаправленность, либо сокращённо - "bidi".

Стандарт Unicode ([UNICODE], раздел 3.11) даёт непростой алгорифм определения направления текста. Данный алгорифм состоит из подразумеваемой части, основывающейся на свойствах символов, а также очевидной, контролирующей внедрения и переопределения. CSS2 обращается к этому алгорифму для достижения соответствующего двунаправленного отображения. Свойства 'direction' и 'unicode-bidi' разрешают авторам специфицировать, как элементы и признаки языка документа отображаются в данный алгорифм.

Если документ содержит символы справа-налево и если ПА отображает эти символы соответствующими глифами (а не произвольно замещающими, такими как знак кавычки, 16-ричный код, чёрный бокс и т.п.), то ПА обязан использовать двунаправленный алгорифм. Это кажущееся односторонним требование отражает тот факт, что, правда не всякий иудейский либо арабский документ содержит текст различных направлений, крупна вероятность того, что эти документы могут содержать текст слева-направо (скажем, числа, текст из других языков).

Поскольку направление текста зависит от конструкции и семантики документа, эти свойства обязаны в большинстве случаев применяться только дизайнерами изложения типа документа (ОТД) либо авторами особых документов. Если таблица жанров по умолчанию специфицирует эти свойства, то авторы и пользователи не обязаны специфицировать правила для их переопределения. Нормальным исключением будет переопределение bidi-поведения в ПА, если данный ПА изготавливает транслитерацию идиша (обыкновенно записанного буквами иврита) на латиницу по запросу пользователя.

Спецификация HTML 4.0 ([HTML40], раздел 8.2) определяет двунаправленное поведение для элементов HTML. Соответствующие HTML ПАгенты могут следственно игнорировать свойства 'direction' и 'unicode-bidi' в авторских и пользовательских таблицах жанров. Правила таблиц жанров, которые нужно использовать для bidi-поведения и которые специфицированы в [HTML40], даны в примере таблицы стилей. Спецификация HTML 4.0 содержит также дополнительную информацию о вопросах двунаправленности.

'direction'
Значение:ltr | rtl | inherit
Начальное:ltr
Применяется:  ко каждому элементам, но см. текст
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это качество специфицирует базовое направление письма блоков и направление внедрений и переопределений (см. 'unicode-bidi') для двунаправленного алгорифма Unicode. Добавочно оно специфицирует направление для столбца таблицы, направление горизонтального переполнения и позицию неполной последней строки блока в том случае, если 'text-align: justify'.

Значения этого свойства имеют дальнейший толк:

ltr
Направление слева направо.
rtl
Справа налево.

Чтобы качество 'direction' работало в элементах инлайн-яруса, значение свойства 'unicode-bidi' обязано быть 'embed' либо 'override'.

Примечание. Качество 'direction', специфицированное для элементов столбца таблицы, не наследуется ячейками столбца, от того что столбцы не существуют в дереве документа. Таким образом, CSS не может применять правила наследования признака "dir", описанные в [HTML40], в разделе 11.3.2.1.

'unicode-bidi'
Значение:normal | embed | bidi-override | inherit
Начальное:normal
Применяется:  ко каждом элементам, но см. текст
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Значения этого свойства имеют дальнейший толк:

normal
Элемент не открывает добавочный ярус внедрения касательно двунаправленного алгорифма. Для элементов инлайн-яруса неявное переупорядочивание работает вне границ элемента.
embed
Если элемент - инлайн-яруса, это значение открывает добавочный ярус внедрения касательно двунаправленного алгорифма. Направление в этом ярусе внедрения задаётся свойством 'direction'. Внутри элемента переупорядочивание выполняется неявно. Это соответствует дополнению LRE (U+202A; для 'direction: ltr') либо RLE (U+202B; для 'direction: rtl') в начале элемента и PDF (U+202C) в конце элемента.
bidi-override
Если элемент - яруса блока либо инлайн и содержит только элементы инлайн-яруса, это значение создаёт переопределение. Это обозначает, что внутри элемента переупорядочивание выполняется сурово в соответствии со свойством 'direction'; неявная часть двунаправленного алгорифма игнорируется. Это соответствует дополнению LRO (U+202D; для 'direction: ltr') либо RLO (U+202E; для 'direction: rtl') в начале элемента и a PDF (U+202C) в конце элемента.

Окончательный порядок символов в всем элементе яруса блока - такой, как если бы bidi-код управления был добавлен так, как описано выше, разметка была бы вырезана, а результирующая последовательность символов - передана в двунаправленный алгорифм Unicode в обыкновенный текст, тот, что производил бы те же самые обрывы строк, что и стилизованный текст. В этом процессе нетекстуальные объекты, такие как изображения, рассматриваются как нейтральные символы, если только их качество 'unicode-bidi' не имеет значений, чудесных от 'normal', тогда они рассматриваются как полужирные (strong) символы в 'direction', специфицированном для элемента.

Пожалуйста, обратите внимание, что, для того дабы иметь возможность поместить инлайн-боксы в одном направлении (все слева-направо либо все справа-налево), может потребоваться создание дополнительных инлайн-боксов (включая неизвестные инлайн-боксы), и потребуется поделить и переупорядочить некоторые инлайн-боксы до размещения.

Поскольку алгорифм Unicode имеет предел - 15 ярусов внедрения, отличнее не применять 'unicode-bidi' со значениями, чудесными от 'normal', если отсутствуют подходящие. Значение 'inherit' должно применяться исключительно осмотрительно. Впрочем для элементов, которые традиционно предполагается отображать как блоки, установка 'unicode-bidi: embed' предпочтительнее для удержания элементов совместно в том случае, когда дисплей изменяется на инлайн (см. пример ниже).

В дальнейшем примере показан документ XML с двунаправленным текстом. Он иллюстрирует значимый тезис дизайна: дизайнеры ОТД обязаны принимать в расчёт bidi и в собственно языке (элементы и признаки), и в сопровождающих таблицах жанров. Таблицы жанров обязаны быть разработаны так, дабы правила bidi были отделены от других правил жанра. Правила bidi не обязаны переопределяться другими таблицами жанров, дабы сберечь поведение bidi языка и ОТД.

Пример(ы):

Здесь буквы нижнего регистра присущи символам слева-направо, а буквы верхнего регистра - символам справа-налево:

<HEBREW>
  <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
  <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
  <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
  <PAR>english14 english15 english16</PAR>
  <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>

Поскольку это - XML, таблица жанров отвечает за направление письма.
Это таблица жанров:

/* Правила для bidi */
HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}
ENGLISH         {direction: ltr; unicode-bidi: embed} 

/* Правила для представления */
HEBREW, ENGLISH, PAR  {display: block}
EMPH                  {font-weight: bold}

Элемент HEBREW это блок с базовым направлением справа-налево, элемент ENGLISH это блок с базовым направлением слева-направо. PARы - это блоки, наследующие базовое направление от своих родителей. Таким образом, первые два PARа готовы начаться справа сверху, а последние три готовы начаться слева сверху. Обратите внимание, пожалуйста, что HEBREW и ENGLISH выбраны как имена элементов лишь для ясности; обыкновенно имена элементов обязаны относиться к структуре, без ссылок на языки.

Элемент  EMPH - яруса инлайн, и, от того что его значение для 'unicode-bidi' - 'normal' (исходное значение), он не оказывает воздействия на порядок расположения текста. Элемент HE-QUO, наоборот, создаёт внедрение.

Если длина строки довольно огромная, форматирование текста может выглядеть приблизительно так:

               5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                                8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

Заметьте, что внедрение HE-QUO принуждает HEBREW18 находиться справа от english19.

Если строки обязаны быть разбиты, то выглядеть будет приблизительно так:

       2WERBEH 1WERBEH
  -EH 4WERBEH english3
                 5WERB

   -EH 7WERBEH 6WERBEH
                 8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 18WERBEH
20WERBEH english19

Поскольку HEBREW18 обязан быть прочитан до english19, он находится в строке над english19. Легкой обрыв строки из предыдущего форматирования не должен сработать.
Подметьте также, что 1-й слог из english19 может войти на предыдущую строку, но перенос слов слева-направо в контекст справа-налево и напротив обыкновенно подавляется, дабы исключить отображение знака переноса в середине строки.