10.8. Расчет высоты строки: свойства 'line-height' и 'vertical-align'.

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

1. Высота каждого внутристрочного блока в строчном блоке рассчитывается (смотрите раздел "Расчет высоты и полей" и свойство 'line-height').
2. Внутристрочные блоки выравниваются вертикально в соответствии с их свойством 'vertical-align'.
3. Высота строчного блока является расстоянием между вершиной самого верхнего блока и низом самого низкого блока.

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

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

10.8.1. Междустрочный пробел и половинный междустрочный пробел.

Поскольку высота внутристрочного блока может различаться в зависимости от размера шрифта текста в блоке (например, 'line-height' > 1em), то возможно наличие пространства выше и ниже визуализированных глифов. Разница между размером шрифта и рассчитанного значения 'line-height' называется междустрочным пробелом (leading). Половина междустрочного пробела называется половинным междустрочным пробелом (half-leading).

Устройства вывода центрируют глифы вертикально в строчном блоке, добавляя половинный межстрочный пробел сверху и снизу. Например, если часть текста – высотой '12pt', а значение 'line-height' равно '14pt', то 2pt дополнительного пространства должно быть добавлено: 1pt сверху и 1pt снизу букв. (Это правило применяется и для пустых блоков, как если бы пустой блок содержал неопределенно узкую букву).

Когда значение 'line-height' меньше, чем размер шрифта, то окончательная высота блока будет меньше, чем размер шрифта, и визуализированные глифы будут вылезать за пределы блока. Если такой блок касается края строчного блока, то визуализированные глифы будут залезать в соседний строчный блок.

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

'line-height'
Тип значения:       normal | <number> | <length> | <percentage> | inherit
Начальная величина: normal
Применяется:        ко всем элементам
Наследование:       да
Процентная база:    ссылается на размер шрифта самого элемента
Медиа:              визуальные

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

Если свойство установлено для внутристрочного элемента, то оно определяет точную высоту каждого блока, сгенерированного элементом. (За исключением внутристрочных заменяемых элементов, где высота блока определяется свойством 'height').

Свойство имеет следующие значения:

normal

Сообщает устройствам вывода установить расчетное значение на "разумную" величину, основанную на размере шрифта элемента. Значение имеет то же значение, как для <number>. Мы рекомендуем расчетное значение для 'normal' между 1.0 и 1.2.

<length>

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

<number>

Рассчитанное значение свойства является числом, умноженным на размер шрифта элемента. Отрицательные значения недопустимы. Но, число (не рассчитанное значение) наследуется.

<percentage>

Рассчитанное значение свойства является процентом, умноженным на размер шрифта элемента. Отрицательные значения не допустимы.

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

DIV { line-height: 1.2; font-size: 10pt }     /* number */
DIV { line-height: 1.2em; font-size: 10pt }   /* length */
DIV { line-height: 120%; font-size: 10pt }    /* percentage */

Когда элемент содержит текст, который визуализируется с несколькими шрифтами, устройство вывода должно определять значение 'line-height' в соответствии с самым большим размером шрифта.

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

Обратите внимание на то, что замещаемые элементы имеют свойства 'font-size' и 'line-height', даже если они не используются напрямую для определения высоты блока. 'font-size' используют для определения единиц 'em' и 'ex', а 'line-height' играет роль в свойстве 'vertical-align'.

'vertical-align'
Тип значения:       baseline | sub | super | top | text-top | middle | 
                    bottom | text-bottom | <percentage> | <length> | inherit
Начальная величина: baseline
Применяется:        к внутристрочным элементам и элементам 'table-cell'
Наследование:       нет
Процентная база:    ссылается на 'line-height' самого элемента 
Медиа:              визуальные

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

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

baseline

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

middle

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

sub

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

super

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

text-top

Выравнивает верх блока с верхом шрифта родительского элемента.

text-bottom

Выравнивает низ блока с низом шрифта родительского элемента.

<percentage>

Повышает (положительное значение) или понижает (отрицательное значение) блок на это расстояние (процент значения 'line-height'). Значение '0%' означает то же самое, что и 'baseline'.

<length>

Повышает (положительное значение) или понижает (отрицательное значение) блок на это расстояние. Значение '0cm' означает то же самое, чти и 'baseline'.

Остальные значения ссылаются на строчный блок, в котором появляется сгенерированный блок:

top

Выравнивает верх блока с верхом строчного блока.

bottom

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