ИКФ: высота строки, часть 2 (4-я публикация цикла «Тайны CSS2.1»)

С помощью текста мы можем регулировать высоту строки только благодаря размерам шрифта, но что делать, если мы хотим задать высоту строки принудительно? Вот тут я должен ввести в игру следующего игрока: "line-height".

Свойство line-height устанавливает интерлиньяж строки, т.е. попросту её высоту, а само состоит из высоты кегельной площадки + half-leading-ов (о них позже). Рассмотрим по порядку, как это действует.

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

Как я и говорил, внутри параграфа находится обычный текст. Но, на самом деле, весь оранжевый блок — это и есть лайн-бокс, и как можно заметить, его высота прилично превышает высоту самого текста. Размер шрифта я выставил 30px, а шрифт я даже не стал трогать, и значит, весь текст состоит из одного шрифта, да к тому же простого, не экзотического. Следовательно, можно взять высоту по максимуму из всех площадок, которая может составлять… думаю, не больше 50px (и то вряд ли). line-height я выставил в 200px, и если отнять от этой цифры размер максимальной площадки (50px), то остаётся 150px, но простите, а куда они тогда делись? Что бы это понять, нужно углубиться и разобрать все составляющие line-height.

В старые времена leading-ом считались свинцовые бруски, которые прокладывали между рядами литер металлического набора, т.е. добавочная высота "свинцовых полосок", отсюда leading, от lead — свинец. Именно с помощью них в старые времена в типографиях раздвигали строки. Но вот в Вебе leading-ом принято считать математическую разность заданного line-height-а и высоты кегля. Но, если говорить уже знакомым нам языком, то leading — это разность line-height-а и самой большой площадки, которые отрендерились font-size'ом и метриками шрифта, о которых мы говорили выше.

А теперь вернёмся к нашему примеру. Мы допустили, что максимальная высота самой высокой площадки составляет 50px, а разность line-height-а и высоты этой площадки получилась 150px. Вот последняя цифра и будет тем самым leading-ом, добавочным "бруском".

Да, но, вы можете задать вопрос: "А почему же тогда текст находится посередине лайн-бокса?". Всё дело в том, что на самом деле leading делится на две равные части, а каждая часть называется "half-leading", что в переводе означает «половина междустрочия». И вот, как раз таки, к каждой стороне высоких площадок и прибавляется вот по такому half-leading-у. В нашем случае вышло, что к каждой стороне прибавилось по 75px, вот почему текст выровнялся посередине.

Я предлагаю рассмотреть эту ситуацию прямо на нашем примере:

На рисунке можно увидеть, из чего состоит высота строки: half-leading (75px) + font-size (50px) + half-leading (75px). Это и есть наш line-height.

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

Давайте рассмотрим конкретный пример.

Если предположить, что самая большая площадка по высоте составляет 30px, а line-height равен 10px, то высота строки в нашем случае будет равна именно десяти пикселям. Почему? А дело в том, что в такой ситуации leading начинает работать в обратную сторону, т.е. попросту становится отрицательным, а так как он состоит из двух частей (half-leading*2), то уменьшаться, по сути, начинают именно последние. Ну, и, конечно же, высота укорачивается с двух сторон в абсолютно одинаковой степени. Например, в нашем случае, half-leading-и составляют по —10px (+-), так как шрифт установлен в 30, а line-height в 10.

leading можно сравнить с полями (margin), только последние делают отступы снаружи элемента, а leading снаружи самой высокой площадки в строке. Как и margin, leading тоже может быть отрицательным, но самое интересное то, что в итоге line-height будет всё равно равен конечному результату. Наш пример можно трактовать как: line-height = 30 + (-10 * 2).

Мы выяснили, что делая значение line-height меньше размера шрифта, на самом деле мы делаем отрицательным leading и уменьшаем именно его, за счёт чего вычисляется итоговая высота строки. Но есть ли какие-нибудь ограничения? Да, есть. На самом деле отрицательный leading не может быть больше высоты самой высокой площадки в строке. Т.е, если, например, размер шрифта составляет 30px, то half-leading-и с двух сторон могут быть максимум по -15px каждый. Что и логично, ведь посудите сами, мы же не можем вывернуть строку наизнанку и сделать line-height равным:-1, -2 и т.д.

Другими словами, half-leading-и не могут отобрать от высоты строки больше, чем по половине, и минимальный теоретический предел высоты строки — ноль. На практике он может быть еще больше, стандарт разрешает браузерам иметь "свое мнение" по этому поводу. Например, совсем недавно Webkit-браузеры не позволяли сжать высоту строки меньше высоты строчных букв.

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

По традиции, сразу приведу пример:

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