The OpenNET Project / Index page

[ новости /+++ | форум | wiki | теги | ]

Каталог документации / Раздел "Web мастеру, CGI, Perl, PHP, Apache" / Оглавление документа

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>
  Тект
  <P>Еще текст
</DIV>
(считается, что для элементов DIV и P установлено значение 'display: block') элемент DIV имеет два типа содержимого: принадлежащего строке и принадлежащего блоку. Чтобы упростить процесс форматирования, предполагается, что надпись "Текст" заключена в безымянный структурный блок.

Рисунок, представляющий три типа блоков для приведенного выше примера   [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) безымянного текста, после которого следует элемент уровня блока, за которым, в свою очередь, следует другой отрывок (C2) безымянного текста. В результате будут сгенерированы безымянный структурный блок для элемента BODY, который содержит безымянный структурный блок, заключающий в себя отрывок C1, структурный блок для элемента P и другой безымянный структурный блок, заключающий в себя отрывок C2.

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

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

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

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

Безымянные строковые блоки

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

<P>Отрывок <EM>выделенного</em> текста</P>

Элемент P порождает структурный блок, который содержит несколько строковых блоков. Блок, содержащий слово "выделенного", является строковым блоком, порожденным строковым элементом EM. Блоки, содержащие слова "Отрывок" и "текста", являются строковыми блоками, порожденными элементом P структурного уровня. Последние называются безымянными строковыми блоками, т.к. не существует элемента строкового уровня, который был бы связан с ними.

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

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

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

9.2.3 Компактные блоки

Компактный блок ведет себя следующим образом:

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

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

В следующем примере представлен компактный блок.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример компактного блока</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Коротко
        <DD><P>Здесь располагается описание
      <DT>Слишком большая длина по сравнению с шириной поля
        <DD><P>Здесь располагается описание
    </DL>
  </BODY>
</HTML>

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

Коротко
		Здесь располагается описание

Слишком большая длина по сравнению с шириной поля
		Здесь располагается описание 

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

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

9.2.4 Инициальные блоки

Инициальный блок ведет себя следующим образом:

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

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

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

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

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

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

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 | наследуемое
Начальное значение:   строковое
Область применения:  все элементы
Наследование:  нет
Процентное задание:  N/A
Устройства:  все

Значения этого свойства:

block
При этом значении свойства элемент порождает главный структурный блок.
inline
При этом значении свойства элемент порождает один или несколько строковых блоков.
list-item
При этом значении свойства элемент (например, LI в HTML) порождает главный структурный блок и строковый блок элемента списка. Информацию о списках и примерах форматирования списков можно найти в разделе о списках.
marker
При этом значении свойства генерируемое содержимое, располагающееся до или после блока, становится маркером. Данное значение должно использоваться только с псевдоэлементами :before и :after, прикрепленным к элементам структурного уровня. В остальных случаях данное значение интерпретируется как 'inline'. Дополнительную информацию можно найти в разделе о маркерах.
none
При этом значении свойства элемент не порождает ни одного блока в структуре форматирования (т.е. элемент никак не влияет на отображение документа). Потомки этого элемента тем более не будут порождать никаких блоков, даже если для их свойства 'display' установлено другое значение.

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

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. Нормальный поток. В CSS2 модель нормального потока включает форматирование блока структурного уровня, строковое форматирование строковых блоков, относительное позиционирование структурных или строковых блоков, а также позиционирование компактных и инициальных блоков.
  2. Перемещаемые объекты. Согласно этой модели блок сначала размещается в соответствии с нормальным потоком, а затем изымается из него и перемещаются максимально влево или вправо насколько это возможно. Отображаемое содержимое может располагаться по сторонам перемещаемого элемента.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (и не влияет на последующие сестринские элементы), а затем ему назначается положение относительно контейнера.
Примечание. Схемы позиционирования, разработанные в CSS2, помогают разработчикам делать свои документы более доступными, избавляя разработчиков от необходимости использовать различные приемы разметки (например, невидимые изображения) для управления отображением документа.

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

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

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

Значения этого свойства:

static
Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства 'left' и 'top' не применяются.
relative
Положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока B используется модель относительного позиционирования, тогда положение следующего блока рассчитывается так, как будто блок B не был смещен.
absolute
Положение блока (возможно и размер) указывается с помощью свойств 'left', 'right', 'top' и 'bottom'. Они указывают величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются из нормального потока. Это значит, что они не влияют на размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков не перекрываются ни с какими другими полями.
fixed
Положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). У разработчиков существует возможность сделать определение значения 'fixed' аппаратно-зависимым. Например, разработчик может сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но не печатной страницы этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано ниже:

Пример(ы):

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

9.3.2 Смещение блоков: 'top', 'right', 'bottom', 'left'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<P>В этом <EM>предложении,</EM> дорогая, 
<STRONG>несколько выделенных</STRONG> слов.</P>

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

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

 В этом предложении, дорогая, несколько выделенных слов.

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

В этом предложении, дорогая, 
несколько выделенных слов.
или по-другому:
В этом предложении, 
дорогая, несколько
выделенных слов.

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

Рассмотрим следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример разбиения на несколько линейных блоков</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px; 
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Здесь <EM>несколько выделенных</EM> слов.</P>
  </BODY>
</HTML>

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

Рисунок, иллюстрирующий влияние разрыва строки на отображение полей, границ и отступов   [D]

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

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

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

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

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

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

9.5 Перемещаемые объекты

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

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

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

Эта модель применима и к перемещаемым объектам, соседствующим друг с другом в одной и той же строке.

Пример(ы):

Следующее правило перемещает все блоки, порожденные элементом IMG с class="icon", влево (и устанавливает значение ширины поля равным нулю):

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

Рассмотрим следующий исходный HTML-документ и таблицу стилей:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример перемещаемого объекта</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="Данный рисунок иллюстрирует перемещаемые объекты">
       Пример текста, у которого нет другого...
  </BODY>
</HTML>

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

Рисунок, иллюстрирующий взаимодействие перемещаемого блока и полей   [D]

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

<BODY>
  <P>Некоторый произвольный текст, 
  <IMG src=img.gif alt=" Данный рисунок иллюстрирует перемещаемые объекты ">
            у которого нет другого...
</BODY>

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

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

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

Пример(ы):

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

Рисунок, иллюстрирующий наложение перемещаемого объекта и границ двух абзацев: графический объект разрывает границы   [D]

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

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

Пример(ы):

Правило

P { clear: left }

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

Рисунок, иллюстрирующий перемещаемый объект и влияние правила 'clear: left' на расположение двух абзацев   [D]

В обоих абзацах установлено свойство 'clear: left', при действии которого второй абзац "принудительным образом" располагается ниже перемещаемого объекта. Для этого увеличивается ширина его верхнего поля (см. свойство '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 Фиксированное позиционирование

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

Разработчики могут использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации:

Рисунок, иллюстрирующий покадровую презентацию с использованием свойства 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>Начало основного текста.
      <SPAN id="outer"> Начало внешнего текста.
      <SPAN id="inner"> Внутренний текст.</SPAN>
      Конец внешнего текста.</SPAN>
      Конец основного текста.
    </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. В результате получится следующее:

Рисунок, иллюстрирующий нормальный поток текста между родительскими и сестринскими блоками   [D]

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

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

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

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

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

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

Рисунок, иллюстрирующий влияние относительного позиционирования на содержимое блока   [D]

Заметьте, что если бы внешний элемент был смещен на '-24px', то произошло бы наложение содержимого внешнего и основного элементов.

9.8.3 Перемещение блоков

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

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

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

Рисунок, иллюстрирующий результаты перемещения блока   [D]

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Сравнение схем позиционирования II</TITLE>
  </HEAD>
  <BODY>
    <P>Начало основного текста.
      <SPAN id=outer> Начало внешнего текста.
      <SPAN id=inner> Внутренний текст.</SPAN>
      <SPAN id=sibling> Содержимое сестринского элемента.</SPAN>
      Конец внешнего текста.</SPAN>
      Конец основного текста.
    </P>
  </BODY>
</HTML>

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

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

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

Рисунок, иллюстрирующий результат перемещения блока без использования свойства    [D]

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

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

Рисунок, иллюстрирующий результат перемещения блока с использованием свойства    [D]

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

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

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

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

Рисунок, иллюстрирующий результаты абсолютного позиционирования блока   [D]

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

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

В результате получим:

Рисунок, иллюстрирующий результат абсолютного позиционирования блока относительно контейнера   [D]

Если внешний блок не позиционируется, т.е. используются правила

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

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

Абсолютное позиционирование блока относительно нормально размещенного назначенного родительским элементом контейнера   [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>

приведет к следующему представлению:

Рисунок, иллюстрирующий использование перемещаемых объектов для создания маркеров исправлений   [D]

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

9.9 Многослойный вывод

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

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

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

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

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

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

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

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

Для размещенного блока свойство 'z-index' указывает:

  1. Позиционный уровень блока в текущем позиционном контексте.
  2. Назначает ли блок локальный позиционный контекст.

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

<целое>
Данное значение является значением позиционного уровня сгенерированного блока в текущем позиционном контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем '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="Бабочка"
           style="z-index: 1">

    <DIV id="text1" class="pile" 
         style="z-index: 3">
      Этот текст будет находиться поверх изображения бабочки.
    </DIV>

    <DIV id="text2">
      Этот текст будет находиться под всем остальным.
    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2">
      Этот текст будет находиться ниже текста text1, но поверх изображения бабочки.
    </DIV>
  </BODY>
</HTML>

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

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

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

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

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

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

В спецификации языка HTML 4.0 ([HTML40], раздел 8.2) определяется тип поведения элементов HTML при двунаправленном выводе текста. Конформные пользовательские агенты, управляющие выводом HTML-документов, могут игнорировать свойства 'direction' и 'unicode-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", описанных в разделе 11.3.2.1 [HTML40].

'unicode-bidi'
Значение:  normal | embed | bidi-override | inherit
Начальное значение:  normal
Область применения:  все элементы, кроме see prose
Наследование:  нет
Процентное задание:  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') в начало элемента и добавлению PDF (U+202C) в конец элемента.

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

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

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

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

Пример(ы):

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

<HEBREW>
  <PAR>ИВРИТ1 ИВРИТ2 русский3 ИВРИТ4 ИВРИТ5</PAR>
  <PAR>ИВРИТ6 <EMPH>ИВРИТ7</EMPH> ИВРИТ8</PAR>
</HEBREW>
<RUSSIAN>
  <PAR>русский9 русский10 русский11 ИВРИТ12 ИВРИТ13</PAR>
  <PAR>русский14 русский15 русский16</PAR>
  <PAR>русский17 <HE-QUO> ИВРИТ18 русский19 ИВРИТ20</HE-QUO></PAR>
</RUSSIAN>

Поскольу это XML, то за установление направления написания ответственна таблица стилей. Она приведена ниже:

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

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

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

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

Форматирование этого текста может иметь следующий вид при большой длине строки:

               5ТИРВИ 4ТИРВИ русский3 2ТИРВИ 1ТИРВИ 

                                8ТИРВИ 7ТИРВИ 6ТИРВИ 

русский9 русский10 русский11 13ТИРВИ 12ТИРВИ 

русский14 русский15 русский16

русский17 20ТИРВИ русский19 18ТИРВИ 

Помните, что в случае вставки HE-QUO элемент ИВРИТ18 будет расположен справа от элемента русский19.

Если необходимо разбить строки, рекомендуется сделать это следующим образом:

          2ТИРВИ 1ТИРВИ 
    -ВИ 4ТИРВИ русский3
                   5ТИР

    -ВИ 7ТИРВИ 6ТИРВИ 
                   8ТИР

русский9 русский10 рус-
ский11 12ТИРВИ 
13ТИРВИ 

русский14 русский15
русский16

русский17 18ТИРВИ 
20ТИРВИ русский19

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




Спонсоры:
Inferno Solutions
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2021 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру