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

Опубликовано: 15 мая 2014      Перевод:

Перевод параграфа 9 спецификации CSS2.1: Visual formatting model.

9.1 Введение в модель визуального форматирования.

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

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

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

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

9.1.1 Вьюпорт.

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

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

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

В CSS 2.1 во многих схемах позиционирования положение бокса и его размеры рассчитываются относительно граней прямоугольной области, называемой содержащим блоком. Если не вдаваться в подробности, то генерируемые боксы выступают в роли содержащих блоков для боксов потомков. Таким образом, можно сказать, что бокс «устанавливает» рамки содержащего блока для своих потомков. Выражение «содержащий блок бокса» означает «содержащий блок, в котором находится бокс», а не тот, который он создает.

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

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

9.2 Контроль генерации боксов.

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

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

К элементам блочного уровня относятся элементы исходного документа, которые в процессе визуального форматирования принимают вид блоков (к примеру, параграфы). Следующие значения свойства 'display' делают элемент блочным: block, list-item и table.

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

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

Зачастую, если не оговорено другое, то вместо терминов «бокс блочного уровня», «блочный бокс контейнер» и «блочный бокс» используется их сокращенный вариант «блок».

9.2.1.1 Анонимные блочные боксы

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

<DIV>
Some text
<P>More text
</DIV>

(полагая, что для элементов DIV и P установлено свойство 'display: block'), элемент DIV, казалось бы, должен содержать два типа контента — строчный и блочный. Для упрощения определения принципов форматирования, мы допускаем, что фрагмент текста "Some text" находится внутри анонимного блочного бокса.

Анонимный бокс.

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

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

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

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

p { display: inline }
span { display: block }

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>Разрыв фрагмента анонимного текста блочным элементом.</TITLE>
</HEAD>
<BODY>
<P>
Это начальная часть фрагмента анонимного текста, находящаяся до
элемента SPAN
.
<SPAN>Это содержимое элемента SPAN.</SPAN>
Это вторая половина фрагмента анонимного текста, расположенная после
элемента SPAN
.
</P>
</BODY>

Элемент P содержит фрагмент анонимного текста (С1), за которым следует элемент блочного уровня, а за ним находится другой фрагмент анонимного текста (С2). В результате документ будет состоять из следующих боксов: блочный бокс, представляющий элемент BODY, который содержит анонимный блочный бокс, заключающий в себе фрагмент C1; блочный бокс элемента SPAN; и другой анонимный блочный бокс, содержащий фрагмент C2.

Значения свойств анонимных боксов наследуются от содержащего их не анонимного бокса (если взять первый пример этого раздела («Анонимные блочные боксы»), представленный в его начале, то это бокс, генерируемый элементом DIV). Не наследуемые свойства принимают свои исходные значения. К примеру, свойства шрифта анонимного бокса наследуются от элемента DIV, а значения его полей будут равными нулю.

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

Некоторые пользовательские агенты применяют несколько иной способ отображения границ строчных элементов, содержащих блоки. Они, к примеру, заключают подобные вложенные блоки в рамки «анонимных строчных боксов» с дальнейшим отображением полноценной внутристрочной границы вокруг этих боксов. Поскольку в спецификациях CSS1 и CSS2 это поведение не определено, то те пользовательские агенты, в которых реализованы исключительно CSS1 и CSS2 спецификации, могут применять эту альтернативную модель отображения границ, что в таком случае будет соответствовать этой части CSS 2.1 спецификации. Но это не касается тех пользовательских агентов, которые были разработаны после того, как данная спецификация была утверждена.

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

9.2.2 Элементы строчного уровня и внутристрочные боксы

Элементы строчного уровня — это те элементы исходного документа, которые не образуют новых блоков контента. Контент в этом случае распространяется построчно (например, выделенные курсивом в рамках абзаца фрагменты текста, внутристрочные элементы изображения и т.д.). Следующие значения свойства display делают элемент строчным: inline, inline-table и inline-block. Элементы строчного уровня генерируют боксы строчного уровня, которые являются боксами, участвующими в строчном контексте форматирования.

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

9.2.2.1 Анонимные внутристрочные боксы

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

В документе с такой HTML разметкой:

<p>Some <em>emphasized</em> text</p>

элемент <p> генерирует блочный бокс с несколькими внутристрочными боксами внутри. Бокс, содержащий слово "emphasized" является внутристрочным, генерируемым строчным элементом (<em>), но остальные боксы ("Some" и "text"), это внутристрочные боксы, которые генерируются элементом блочного уровня (<p>). Последние называют анонимными внутристрочными боксами, поскольку у них нет ассоциируемого с ними элемента строчного уровня.

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

Пробельный контент, который согласно свойству white-space впоследствии при визуализации документа должен быть свернут, не генерирует анонимных внутристрочных боксов.

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

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

9.2.3 Встраиваемые боксы

[Данный параграф приведен здесь для того, чтобы настоящая нумерация параграфов не отличалась от используемой в предыдущих редакциях этой спецификации. Свойство display: run-in теперь определено в спецификации CSS уровень 3 (смотри CSS базовая модель бокса).]

9.2.4 Свойство 'display'.

'display'
Допустимые значения: inline | block | list-item | inline-block | 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
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: все
Вычисляемое значение: смотри ниже

Значения этого свойства имеют следующий смысл:

block
Это значение заставляет элемент генерировать блочный бокс.
inline-block
Это значение приводит к тому, что элемент генерирует блок контейнер строчного уровня. Все, что содержится внутри внутристрочного блока форматируется также как и внутри обычного блочного бокса, а сам элемент форматируется как атомарный бокс строчного уровня.
Inline
Это значение вынуждает элемент генерировать один или более внутристрочных боксов.
list-item
Использование этого свойства приводит к генерации элементом (подобно HTML элементу LI) основного блочного бокса и маркерного бокса. Более детальная информация по элементам спискам с примерами их форматирования находится в параграфе cписки.
none
Это значение исключает элемент из структуры форматирования (то есть в устройствах с визуальным отображением информации элементом не генерируются боксы и он не оказывает никакого эффекта на макет документа и его компоновку). Его потомки также не образуют никаких боксов. Элемент, включая его контент полностью изымаются из структуры форматирования. Это поведение не может быть переопределено путем изменения значения свойства display у элементов потомков.

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

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption
Эти значения приводят к тому, что элемент ведет себя как элемент таблица (с учетом всех ограничений, описанных в главе «Таблицы»).

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

Обратите внимание, что хотя исходным значением свойства display является inline, правила, используемые в дефолтной таблице стилей пользовательского агента могут переопределить это значение. Пример таблицы стилей для HTML4 можно увидеть в приложении.

Вот несколько примеров применения свойства display:

p { display: block }
em { display: inline }
li { display: list-item }
img { display: none } /* Изображение не отображается */

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

В CSS 2.1 бокс может быть размещен в соответствии с тремя схемами позиционирования:

  1. Нормальный поток. Согласно CSS 2.1 нормальный поток включает в себя блочное форматирование боксов блочного уровня, строчное форматирование боксов строчного уровня и относительное позиционирование боксов блочного и строчного уровня.
  2. Плавающие элементы. В модели позиционирования плавающих элементов бокс в первую очередь располагается в соответствии с его положением, предусмотренным нормальным потоком документа, затем он изымается из нормального потока и смещается влево или вправо на столько, насколько это допустимо. Контент при этом может обтекать плавающий элемент с его противоположной стороны.
  3. Абсолютное позиционирование. В соответствии с моделью абсолютного позиционирования бокс полностью извлекается из нормального потока (он не оказывает никакого влияния на последующие родственные элементы того же уровня), а его позиция определеяется относительно его содержащего блока.

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

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

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

Свойства position и float определяют какой из предусмотренных в CSS 2.1 алгоритмов позиционирования применяется для расчета позиции бокса.

'position'
Допустимые значения: static | relative | absolute | fixed | inherit
Исходное значение: static
Применяется к: все элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

Значения этого свойства имеют следующий смысл:

static
Обычный бокс, размещаемый в соответствии с нормальным потоком. Свойства top, right, bottom и left не влияют на расположение элемента.
relative
Позиция бокса рассчитывается в соответствии с общим потоком (называется позицией в общем потоке). Затем бокс смещается относительно своей нормальной позиции. К примеру, когда бокс В участвует в относительном позиционировании, то позиция последующего бокса рассчитывается так, как будто бокс В не был смещен. Эффект от назначения свойства position:relative для table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell и table-caption элементов не определен.
absolute
Местоположение бокса (а, возможно, и его размеры) определяются свойствами top, right, bottom и left. С помощью этих свойств устанавливается смещение относительно содержащего блока бокса. Абсолютно позиционированные боксы изымаются из нормального потока документа. Это значит, что они не оказывают никакого влияния на размещение следующих за ними родственных элементов одного уровня. Кроме того, несмотря на то, что для абсолютно позиционированных боксов предусмотрено использование полей, эти поля не объединяются с любыми другими полями.
fixed
Позиция бокса рассчитывается с использованием «абсолютной» модели, но в дополнение к этому, бокс фиксируется относительно определенной опорной области. Также как и в модели абсолютного позиционирования, поля бокса не объединяются с любыми другими полями. В случае с портативными, телевизионными, проэкционными, экранными и телетайпными медиа типами устройств, бокс фиксируется относительно вьюпорта и не передвигается при его прокручивании. В случае с печатающими устройствами, бокс отображается на каждой странице и фиксируется в позиции, определяемой относительно страничного бокса, даже если страница видна частично через определенный вьюпорт (тогда, к примеру, когда пользователь применил опцию print preview). Для остальных типов устройств данное представление не определено. Разработчики, возможно, захотят использовать значение fixed в зависимости от медиа типа конечного устройства. К примеру, разработчик пожелает чтобы форматируемый бокс оставался в верхней части вьюпорта на экране пользователя, но не отображался на каждой распечатываемой им странице. Значения свойства, определяющие эти два различных поведения, могут быть определены отдельно, каждое с использованием соответствующего медиа правила, как, например, здесь:

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

При представлении контента фиксированных боксов ПА не должны разбивать его на несколько страниц. Имейте в виду, что ПА могут подругому обрабатывать скрытый контент при печати. Подробности в параграфе «Контент, находящийся вне страничного бокса» главы 13.

Применительно к корневому элементу, пользовательским агентам разрешается интерпретировать значение данного свойства как static.

9.3.2 Свойства смещения бокса: 'top', 'right', 'bottom', 'left'.

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

'top'
Допустимые значения: <расстояние> | <процентное отношение> | auto | inherit
Исходное значение: auto
Применяется к: позиционированные элементы
Возможность наследования: нет
Процентные значения: относительно высоты содержащего блока
Типы устройств: визуальные
Вычисляемое значение: если при определении установлено как расстояние, то соответствующее абсолютное расстояние; если при определении установлено как процентное отношение, то используется определенное значение; иначе — auto

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

'right'
Допустимые значения: <расстояние> | <процентное отношение> | auto | inherit
Исходное значение: auto
Применяется к: позиционированные элементы
Возможность наследования: нет
Процентные значения: относительно ширины содержащего блока
Типы устройств: визуальные
Вычисляемое значение: если при определении установлено как расстояние, то соответствующее абсолютное расстояние; если при определении установлено как процентное отношение, то используется определенное значение; иначе — auto

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

'bottom'
Допустимые значения: <расстояние> | <процентное отношение> | auto | inherit
Исходное значение: auto
Применяется к: позиционированные элементы
Возможность наследования: нет
Процентные значения: относительно высоты содержащего блока
Типы устройств: визуальные
Вычисляемое значение: если при определении установлено как расстояние, то соответствующее абсолютное расстояние; если при определении установлено как процентное отношение, то используется определенное значение; иначе — auto

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

'left'
Допустимые значения: <расстояние> | <процентное отношение> | auto | inherit
Исходное значение: auto
Применяется к: позиционированные элементы
Возможность наследования: нет
Процентные значения: относительно ширины содержащего блока
Типы устройств: визуальные
Вычисляемое значение: если при определении установлено как расстояние, то соответствующее абсолютное расстояние; если при определении установлено как процентное отношение, то используется определенное значение; иначе — auto

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

Значения, используемые для этих четырех свойств, имеют следующий смысл:

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

9.4 Нормальный поток

Находящиеся в нормальном потоке боксы относятся либо к блочному, либо строчному контексту форматирования, но не к обеим одновременно. Боксы блочного уровня участвуют в контексте блочного форматирования. Боксы строчного уровня участвуют в строчном контексте форматирования.

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

Плавающие, абсолютно позиционированные элементы, блоки контейнеры (такие как inline-block, table-cell и table-caption), которые не создают блочных боксов, а также блочные боксы с установленным свойством overflow, отличным от visible (то есть, за исключением тех случаев, когда их содержимое выходит за границы элементов) образуют новый контекст блочного форматирования для своего контента.

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

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

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

9.4.2 Контекст строчного форматирования

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

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

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

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

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

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

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

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

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

Ниже приведен пример конструкции внутристрочного бокса. Используемый в нем абзац (реализованный с помощью элемента блочного уровня P), содержит анонимный текст разбитый элементами EM и STRONG:

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

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

  • анонимный: "Several"
  • образуемый EM элементом: "emphasized words"
  • анонимный: appear
  • образуемый элементом STRONG: "in this"
  • анонимный: "sentence, dear."

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

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.01//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>

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

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

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

Как только бокс будет размещен в соответствии с нормальным потоком или являясь плавающим смещен всторону, он может быть сдвинут относительно этой позиции. Это называется относительным позиционированием. Такого рода смещение бокса (допустим В1) не оказывает никакого влияния на бокс (B2), из чего следует, что расчет позиции В2 делается таким образом, как будто к В1 смещение не применялось вовсе, а после того, как В1 будет смещен, позиция В2 не пересчитывается. Это значит, что относительное позиционирование может привести к наложению боксов друг на друга. Однако, если в результате применения относительного позиционирования происходит переполнение бокса с установленным свойством overflow:auto или overflow:scroll, то ПА должен предоставить пользователю возможность доступа к этому контенту (в его смещенной позиции), что по причине создания скроллбаров может повлиять на компоновку страницы.

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

Применительно к относительно позиционированным элементам, свойства left и right перемещают их боксы в горизонтальной плоскости, не изменяя при этом их размеров. С помощью свойства left боксы смещаются вправо, а свойство right смещает их влево. Поскольку в результате применения свойств left и right боксы не разделяются на части и не растягиваются, то для применяемых значений всегда справедливо равенство:
left=-right.

Если оба свойства left и right определены как auto (их исходные значения), то применяемые к ним значения равны нулю 0 (то есть боксы в этом случае не смещаются и остаются на своих местах).

Если left определено как auto, то применяемое к нему значение равно применяемому к свойству right, но с отрицательным знаком (боксы сдвигаются влево на значение, установленное для свойства right).

И наоборот, если right определено как auto, то к нему применяется отрицательное значение противоположного ему свойства left.

Когда для обоих свойств left и right заданы значения отличные от auto, то позиция бокса в данном случае считается сверхограниченной и в этом случае одно из значений должно быть проигнорировано. Тогда, если для свойства direction содержащего блока установлено значение ltr, то преимуществом пользуется свойство left, а свойству right присваивается значение -left. Если же свойство direction содержащего блока установлено в rtl, то учитывается только свойство right, а left игнорируется.

Пример. Все три приведенные ниже правила эквивалентны:

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

Свойства top и bottom сдвигают относительно позиционируемый элемент (элементы) вверх или вниз, не изменяя при этом их размеров. Свойство top смещает боксы вниз, а bottom — вверх. Поскольку в результате применения свойств top и bottom форматируемые боксы не разделяются на отдельные части и не растягиваются, то применяемые значения для этих свойств всегда удовлетворяют равенству: top = -bottom. Если оба установлены в auto, то к ним применяются нулевые значения. Если же только одно из них определено как auto, то оно принимает отрицательную величину, определенного для другого свойства значения. В том случае, когда значение auto не используется для обоих свойств, то свойство bottom игнорируется (то есть применяемое значение для bottom будет равно значению top, но с отрицательным знаком).

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

Примеры относительного позиционирования представлены в разделе «Сравнение схем позиционирования — нормального потока, плавающих элементов и абсолютного позиционирования».

9.5 Плавающие элементы.

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

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

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

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

Строчный бокс размещается сбоку плавающего элемента в том случае, если на странице имеется вертикальное пространство, удовлетворяющее всем, перечисленным ниже четырем условиям: (a) оно должно начинаться ниже или вровень с верхней гранью строчного бокса, (b) заканчиваться вровень или выше нижней грани строчного бокса, (c) начинаться ниже грани верхнего поля плавающего элемента, (d) заканчиваться выше грани нижнего поля  бокса плавающего элемента.

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

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

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

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

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }

<p>
<span> </span>
Supercalifragilisticexpialidocious
</p>

Данный фрагмент может выглядеть следующим образом:

Смещение вниз строчного бокса.

Несколько плавающих элементов могут прилегать друг к другу, а описанная в данном параграфе модель в полной мере касается и находящихся на одной строке прилегающих смещенных элементов.

Представленное ниже правило смещает влево все боксы, элементов изображений img с классом class="icon" (и устанавливает размер левого поля равным нулю):

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

Давайте рассмотрим следующий исходный HTML код и соответствующие стили:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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.png alt="This image will illustrate floats">
Some sample text that has no other…
</BODY>
</HTML>

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

<Смещенный элемент и его поля.

Форматирование было бы точно таким же, если бы мы изменили соответствующий фрагмент документа следующим образом:

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

Это объясняется тем, что находящаяся слева от плавающего элемента часть контента замещается этим элементом, смещаясь вправо относительно него и распространяется далее вниз.

Как утверждается в параграфе 8.3.1, поля плавающих боксов никогда не объединяются с полями прилегающих боксов. То есть, в предыдущем примере поля вертикально прилегающих боксов, образуемых элементом параграфом P и плавающим боксом изображения, не объединяются.

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

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

Плавающий элемент скрывает границы соседних блоков.

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

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

И с учетом такого правила как:

p { clear: left }

форматирование документа может приобрести следующий вид:

Обтекаемое изображение и отменяющий обтекание интервал.

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

9.5.1 Позиционирование плавающих элементов: свойство 'float'.

'float'
Допустимые значения: left | right | none | inherit
Исходное значение: none
Применяется к: все элементы, с учетом условий, указанных в разделе 9.7
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

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

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

Применительно к корневому элементу пользовательские агенты могут трактовать значение свойства float как none.

Ниже приведены точные правила, определяющие поведение плавающих элементов:

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

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

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

Результат действия следующего HTML кода приводит к тому, что символ b смещается вправо.

<P>a<SPAN style="float: right">b</SPAN></P>

Если ширина элемента P достаточна, то символы a и b будут размещены по разные его стороны. Что может выглядеть следующим образом:

Смещение строчных элементов.

9.5.2 Контроль прилегающего к плавающим элементам потока: свойство 'clear'.

'clear'
Допустимые значения: none | left | right | both | inherit
Исходное значение: none
Применяется к: Элементы блочного уровня
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

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

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

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

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

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

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

В этом случае размер такого интервала должен быть равен большему из значений:

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

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

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

Отменяющий обтекание интервал может принимать нулевое и отрицательные значения.

Пример 1.  

Допустим (для простоты примера), что у нас имеется лишь три бокса, находящиеся в следующем порядке: блок B1 с нижним полем  M1 (у элемента B1 нет дочерних элементов, внутренних отступов и границ); плавающий блок F, высота которого равна H; и блок B2 c верхним полем M2 (также без отступов, границ и дочерних элементов). Для элемента B2 установлено свойство clear со значением both. Мы также предполагаем, что элемент B2 не пустой, то есть содержит определенный контент.

Если не принимать во внимание свойство clear элемента B2, то получим ситуацию представленную ниже на диаграмме. Поля элементов B1 и B2 объединяются. Допустим, что край нижней границы элемента B1 находится на позиции y=0, тогда верх элемента F будет расположен на уровне y=M1, край верхней границы элемента B2 в таком случае будет находиться на расстоянии, равном наибольшему из двух полей y=max(M1,M2) и нижняя грань элемента F соответствует точке y=M1+H.

Модель отменяющего обтекание интервала.

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

max(M1,M2) < M1 + H

Нам необходимо дважды рассчитать значение отменяющего обтекание интервала C, то есть для начала получить два промежуточных значения C1 и C2 и выбрать наибольшее из них: C=max(C1,C2). Первый вариант заключается в совмещении верхней грани элемента B2 с нижней гранью F, то есть на уровне y=M1+H. И с учетом того, что поля элементов больше не объединяются по причине наличия отменяющего обтекание интервала, имеем следующее:

нижняя грань F = грань верхней границы B2 <=> M1+H = M1+C1+M2 <=>
<=> C1 = M1+H-M1-M2 = H-M2

При втором варианте расчета подразумевается, что верхняя грань элемента B2 остается на том же месте, то есть на уровне y=max(M1,M2). А это значит, что:

max(M1,M2) = M1+C2+M2 <=> C2 = max(M1,M2)-M1-M2

Как предполагалось выше, что max(M1,M2) < M1+H, а значит:

C2 = max(M1,M2)-M1-M2 < M1+H-M1-M2 = H-M2 <=> C2 < H-M2

А поскольку C1 = H-M2, то:

C2 < C1

следовательно:

C = max(C1,C2) = C1
Пример 2.  

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

<p style="margin-bottom: 4em">
Первый параграф.

<p style="float: left; height: 2em; margin: 0">
Плавающий параграф.

<p style="clear: left; margin-top: 3em">
Последний параграф.

Пояснение:  Без использования свойства clear поля первого и последнего элементов параграфов объединяются, в результате чего край верхней границы последнего параграфа будет находиться на одном уровне с верхней гранью плавающего параграфа. Но наличие свойства clear требует, чтобы край верхней границы форматируемого элемента был ниже плавающего параграфа, в данном случае на величину 2em. А это означает, что должен использоваться отменяющий обтекание интервал. Учитывая то, что поля параграфов уже не объединяются и размер отменяющего интервала С устанавливается исходя из того, что C+'верхнее поле'=2em, то:

C = 2em-'верхнее поле' = 2em–3em = -1em

Если данное свойство устанавливается для плавающих элементов, то это приводит к некоторым изменениям правил позиционирования плавающих элементов. То есть к уже существующему списку добавляется еще одно, десятое правило:

  • Верхняя внешняя грань плавающего элемента должна находиться под нижней внешней гранью всех ранее определенных, смещенных влево боксов (если применяется clear: left), смещенных вправо боксов (если применяется clear: right) или же смещенных как вправо, так и влево боксов (если применяется значение clear: both).
Согласно CSS1 спецификации это свойство может применяться ко всем элементам без исключения. Реализации, следовательно, могут поддерживать данное свойство применительно ко всем элементам. В CSS2 и CSS2.1 использование свойства clear допустимо только для элементов блочного уровня. Поэтому разработчики должны применять его исключительно для элементов блочного уровня. Если же определенная реализация поддерживает свойство clear для строчных элементов, то вместо того, чтобы устанавливать отменяющий обтекание интервал указанным выше способом, реализацией должен использоваться принудительный промежуток в виде фактической вставки одного или нескольких пустых строчных боксов (или же новый строчный бокс должен смещаться вниз, как описано в разделе 9.5) для того, чтобы верхняя внешняя грань строчного бокса, содержащего внутристрочный бокс, к которому применяется свойство clear, была ниже соответствующего плавающего бокса (или же нескольких плавающих боксов).

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

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

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

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

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

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

Фреймовый шаблон страницы.

Его можно реализовать с помощью представленного ниже HTML документа, содержащего необходимые стилевые настройки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS 2.1</TITLE>
<STYLE type="text/css" media="screen">
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, к боксу применяется абсолютное позиционирование, вычисляемым значением для свойства float является none, а свойство display устанавливается в соответствии с представленной ниже таблицей. Позиция бокса в данном случае будет определяться исходя из значений свойств top, right, bottom и left, а также относительно его содержащего блока.
  3. Иначе, если значение свойства float отлично от none, бокс смещается, а значение свойства display определяется в соответствии с приведенной ниже таблицей.
  4. Иначе, если элемент является корневым, то значение свойства display устанавливается по представленной ниже таблице, за исключением того, что если определенным значением является list-item, то спецификация CSS 2.1 не дает точного определения какое при этом используется вычисляемое значениеblock или list-item.
  5. В противном случае, для всех остальных значений свойства display применяются получаемые при определении значения.
Определяемое значение Вычисляемое значение
inline-table table
inline, table-row-group, table-column,
table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block
block
другие аналогично полученному при определении

9.8 Сравнение схем позиционирования — нормального потока, плавающих элементов и абсолютного позиционирования.

С целью иллюстрации различий между нормальным потоком, относительным позиционированием, поведением плавающих элементов и абсолютным позиционированием здесь представлен ряд примеров, в основу которых взят вот этот HTML документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes</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; font-size:12px; line-height: 200%;
width: 400px; height: 400px }
p { display: block }
span { display: inline }

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

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

9.8.1 Нормальный поток.

К уже существующим CSS правилам для элементов outer и inner добавим приведенные ниже декларации, которые не влияют на распределение боксов нормальным потоком документа:

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

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

Нормальный поток.

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

Для того чтобы показать эффект применения относительного позиционирования, мы определили следующие стили:

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

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

Поскольку inner является дочерним элементом outer элемента, то в нормальных условиях его контент должен распространяться сразу же за словами "of outer contents", на одном уровне с ними (на строке 1,5). Однако, контент элемента inner в свою очередь также смещен на 12px (вверх) относительно контента outer элемента, то есть на свою исходную позицию, на уровень строки 2.

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

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

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

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

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

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

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

Обтекаемый бокс.

Для демонстрации эффекта от применения свойства clear, в используемый нами пример добавлен еще один элемент — sibling:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
<HTML>
<HEAD>
<TITLE>Comparison of positioning schemes 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 по-прежнему смещается вправо, а доступное пространство заполняется оставшимся текстом документа:

Обтекание бокса текстом.

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

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
Обтекание бокса текстом.

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, то он как и полагается размещается относительно своего родителя.

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

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

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

Что приводит к примерно такому результату:

Взаимодействие поточных, обтекаемых и абсолютно позиционированных боксов.

Если же мы не станем позиционировать outer бокс:

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

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

Смещение абсолютно позиционированного бокса.

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

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

может быть отображен примерно вот так:

Changebar.

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

9.9 Многослойная презентация.

9.9.1 Определение стекового уровня: свойство 'z-index'.

'z-index'
Допустимые значения: auto | <целое число> | inherit
Исходное значение: auto
Применяется к: Позиционированные элементы
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

Применительно к позиционированному боксу свойство z-index определяет:

  1. Стековый уровень бокса в текущем стековом контексте.
  2. Формирует ли сам бокс стековый контекст.

Используемые значения имеют следующий смысл:

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

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

Согласно CSS 2.1 позиция любого бокса имеет три измерения. В дополнение к их горизонтальной и вертикальной координатам, боксы размещаются относительно оси Z, в результате чего форматируются с наложением друг на друга. Позиционирование по оси Z наиболее уместно в том случае, когда боксы визуально перекрывают друг друга. В данном параграфе разъясняется, как боксы могут располагаться относительно оси Z.

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

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

Корневой элемент образует корневой стековый контекст. Все остальные стековые контексты, образуются любым из позиционированных элементов (включая относительно позиционированные элементы), вычисляемое значение свойства z-index которого отлично от auto. Стековые контексты не обязательно связаны с содержащими блоками. В следующих версиях CSS спецификации образование стекового контекста будет возможно с помощью других свойств, таких, к примеру, как opacity [CSS3COLOR].

Далее представлен предусматриваемый каждым стековым контекстом порядок отрисовки слоев, начиная с самого нижнего:

  1. Фон и границы элемента, формирующего стековый контекст.
  2. Дочерние стековые контексты с отрицательным значением стекового уровня (начиная с самого отрицательного).
  3. Поточные, не позиционированные, не относящиеся к строчному уровню элементы потомки.
  4. Не позиционированные плавающие элементы.
  5. Поточные, не позиционированные потомки строчного уровня, включая внутристрочные таблицы и внутристрочные блоки.
  6. Дочерние стековые контексты с нулевым стековым уровнем, а также позиционированные потомки с нулевым стековым уровнем.
  7. Дочерние стековые контексты с положительными значениями стековых уровней (по возрастанию их величины).

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Z-order positioning</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.png" 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.

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

Определенные системы письма предусматривают написание символов в направлении справа налево. Некоторые документы, в частности те, которые составлены с помощью арабской или еврейской письменности, могут содержать смешано языковые фрагменты контента, поэтому текст в рамках одного визуально отображаемого блока может распространяться в различных направлениях. Такое необычное поведение называется двунаправленностью или сокращенно от английского "bidirectionality""bidi".

Стандарт Unicode ([UNICODE], [UAX9]) описывает сложный алгоритм определения корректного направления текста. Данный алгоритм включает код, производящий автоматическое определение направленности текста, направление распространения которого не задано явным образом, при этом алгоритм руководствуется свойствами символов. Кроме того, данным алгоритмом предусмотрены специальные элементы управления направленностью текста — вложения и переопределения. Спецификация CSS 2.1
полагается на этот алгоритм в вопросе визуализации двунаправленного текста. Свойства direction и unicode-bidi позволяют авторам контролировать, как элементы и атрибуты языка документа будут обрабатываться этим алгоритмом.

Пользовательские агенты, поддерживающие двунаправленный текст, должны использовать алгоритм обработки двунаправленного текста Unicode применительно к каждой последовательности боксов строчного уровня, которая не прерывается принудительным разрывом (bidi класс В) или границей блока. Такая последовательность образует используемую двунаправленным алгоритмом единицу, именуемую «параграфом». Уровень вложенности направленности текста параграфа устанавливается в соответствии со значением свойства direction его содержащего блока, а не на основе эвристики, используемой в P2 и Р3 шагах алгоритма Unicode.

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

Спецификация HTML4 ([HTML4], раздел 8.2) определяет двунаправленное поведение HTML элементов. Соответствующие стилевые правила, с помощью которых можно добиться двунаправленной обработки текста, определенной в [HTML4], представлены в примере таблицы стилей. В HTML4 спецификации также содержится дополнительная информация, касающаяся вопросов обработки двунаправленного текста.

'direction'
Допустимые значения: ltr | rtl | inherit
Исходное значение: ltr
Применяется к: все элементы, но с некоторыми указанными ниже условиями.
Возможность наследования: да
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

Это свойство определяет базовое направление распространения текста в блоках, а также применяется для указания его направления во вложениях и переопределениях — элементах, используемых в рамках Unicode алгоритма обработки двунаправленного текста (смотри свойство unicode-bidi). В дополнение к этому, данное свойство применяется и для других случаев, таких как определение направления размещения колонок таблицы, указание горизонтальной направленности распространения переполнения, определение позиции неполной последней строки блока, с установленным свойством text-align: justify.

Используемые для этого свойства значения имеют следующий смысл:

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

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

Определенное для элементов колонок таблицы свойство direction не наследуется входящими в их состав ячейками, поскольку колонки не являются предками ячеек в дереве документа. Таким образом, CSS не позволяет просто перенять возможности наследования, которыми обладает атрибут dir, описанные [HTML4] стандартом в параграфе 11.3.2.1.
'inicode-bidi'
Допустимые значения: normal | embed | bidi-override | inherit
Исходное значение: normal
Применяется к: все элементы, но с некоторыми указанными ниже условиями.
Возможность наследования: нет
Процентные значения: не поддерживаются
Типы устройств: визуальные
Вычисляемое значение: полученное при определении

Используемые для этого свойства значения имеют следующий смысл:

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) в начале элемента или в начале каждого дочернего анонимного блочного бокса (если таковые имеются) и специального символа PDF (U+202C) в конце элемента.

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

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

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

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

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

<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, для определения направленности написания текстовых фрагментов необходимы стилевые настройки. Вот соответствующая таблица стилей:

/* Rules for bidi */
HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed}
ENGLISH {direction: ltr; unicode-bidi: embed}

/* Rules for presentation */
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. В данном случае простой разрыв длинной строки из показанного выше форматирования не приведет к корректному результату. Обратите внимание также и на то, что первый слог фрагмента english19 смог бы поместиться на предыдущей строке, однако перенос слов лево-правого направления в контекстном окружении право-левой направленности и наоборот, зачастую не производится с целью предотвращения появления символа переноса слова (дефиса) посередине строки.