Главная » Полезные статьи » HTML-верстка » ИКФ: высота строки, часть 1 (3-я публикация цикла “Тайны CSS2.1″)
Распечатать статью

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

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

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

 

Высота лайн-бокса

Первым делом давайте всё-таки уточним, из чего же в итоге вычисляется общая высота (лайн-бокса). Общее правило таково: высота строки берётся с расчётом, чтобы заведомо вместить самый высокий ее элемент. Чем бы этот элемент ни оказался — текстом, картинкой, инлайн-блоком и т.п.

Высота картинок и инлайн-блоков определяется их свойством height (min-height) или внутренней высотой (высотой контента для инлайн-блоков). Высота обычных инлайн-боксов с текстом определяется значением свойства line-height (присвоенного инлайн-элементу или унаследованному им), а если line-height не задано — то от метрик шрифта (также заданного самому элементу или унаследованному). Анонимные инлайн-боксы получают значения line-height и свойства шрифта от своего блочного контейнера.

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

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

Высота текста

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

Любой символ шрифта в вебе представлен прямоугольной площадкой определенного размера и пропорций. Основной размер шрифта определяется его кеглем (он задается свойством font-size), а пропорции — сколько тысячных долей кегля будут выступать над базовой линией, сколько будет «свисать» под нее, и сколько составит ширина каждого символа — определяется свойствами самого шрифта, его метриками. Как правило, ширина площадки у каждого символа своя (только в моноширинных шрифтах площадки разных символов в ширину одинаковы), а вертикальные метрики общие для всех символов и характеризуют весь шрифт целиком. Например, для буквы «A» в шрифте Ubuntu Titling Bold площадка будет на 0,75 кегля выступать над базовой линией, на 0,25 свисать вниз под нее и в ширину займет 0,592 кегля — т.е. ее габариты составят 1,000×0,592 кегля. Метрики шрифта хранятся где-то в файле шрифта, детали зависят от его формата и операционной системы (напр., для шрифтов TrueType в Windows высота определяется метриками usWinAscent и usWinDescent). Но, давайте по порядку.

Площадка

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

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

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

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

Размер шрифта (кегль) по-прежнему один и тот же у всех символов (те же 100px), но площадки символов разных шрифтов, различающихся по начертанию и пропорциям, теперь тоже оказались разными. По сравнению с предыдущим примером разница налицо, не правда ли?

Как определяется высота каждой площадки?

Прежде чем выяснить этот вопрос, я хотел бы познакомить вас с очень важной деталью в построении текста, которая имеет название «Базовая линия»

Базовая линия

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

Выглядит это примерно так:

Красная линия на изображении и есть та самая базовая линия, о которой идёт речь. И как можно видеть, несмотря на различность в высоте площадок все символы «сидят» прямо на ней. Обратите внимание на первую букву «g«. Её нижняя часть выпирает из базовой линии. Это — нижний выносной элемент буквы.

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

А теперь вернёмся к нашим баранам:

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

Две похожие вертикальные метрики берут на себя вычисление двух частей самой площадки. Первая метрика вычисляет верхнюю часть, до базовой линии, а вторая нижнюю, после неё. Например, если брать такие метрики, как usWinAscent и usWinDescent, то первая (usWinAscent) будет вычислять высоту сверху базовой, а вторая (usWinDescent) – под.

Ради любопытства мы решили разобрать шрифт в формате svg (где каждая литера описана, как определённая кривая), чтобы посмотреть лежащие на виду метрики. Мы воспользовались генератором с fontsquirrel.com, создающим для каждого шрифта набор файлов, включая svg, и прогнали через него вот этот шрифт. Для каждой литеры указана авансовая ширина (сдвиг координаты следующего символа), а для всего шрифта указаны ascent и descent вот в таком виде: <font-face units-per-em=»2048″ ascent=»1638″ descent=»-410″ />. Именно эти параметры используются для деления площадок на над базовой / под базовой. Над базовой получается 1638/2048, а под ней – 410/2048.

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

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

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

Но всё-таки, какова же высота строки в итоге?

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

В нашем случае самая высокая площадка вышла у шестого символа слева – буквы «H«, а самая низкая у буквы «g» в слове «height», и в итоге высота нашей строки получилась 228px. А кегль шрифта, напомним, равен всего 100px!

Источник:  css-live.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи