Что такое line height

line-height

Краткая информация

Версии CSS

Описание

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

Синтаксис

line-height: множитель | значение | проценты | normal | inherit

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства line-height

Объектная модель

[window.]document.getElementById(» elementID «).style.lineHeight

Браузеры

Источник

line-height

Краткая информация

Версии CSS

Описание

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

Синтаксис

line-height: множитель | значение | проценты | normal | inherit

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства line-height

Объектная модель

[window.]document.getElementById(» elementID «).style.lineHeight

Браузеры

Источник

Погружение в CSS: метрики шрифтов, line-height и vertical-align

line-height и vertical-align — это простые свойства CSS. Настолько простые, что большинство из нас уверены, что понимают, как они работают и как их использовать. К сожалению, это не так — на самом деле они, пожалуй, являются самыми сложными свойствами, поскольку играют важную роль в создании малоизвестной особенности CSS под названием «строчный контекст форматирования» (inline formatting context).

Например, line-height можно задать в виде длины или безразмерного значения, но его значение по умолчанию — normal (стандартное). Хорошо, но что значит «стандартное»? Зачастую пишут, что это (как правило) 1, или, может быть, 1,2. Даже в спецификации CSS нет четкого ответа на данный вопрос.

Давайте углубимся в не самый простой механизм CSS…

Начнем с разговора о font-size

При использовании одного и того же font-size в разных гарнитурах высота получается различной:

Даже если нам известно об этой особенности, почему font-size: 100px не создает элементы высотой 100px? Я измерил эти значения: Helvetica — 115px, Gruppo — 97px и Catamaran — 164px.

Хотя на первый взгляд это выглядит несколько странно, все вполне ожидаемо — причина в самом шрифте. Как это работает:

Прежде чем нырнуть глубже, рассмотрим основные моменты, с которыми придется столкнуться. Элемент p при отображении на экране может состоять из нескольких строк с соответствующей шириной. Каждая строка состоит из одного или нескольких строчных элементов (inline elements)(HTML-тегов или анонимных строчных элементов для текстового содержимого) и называется контейнером строки (line-box). Высота контейнера строки зависит от высот его дочерних элементов. То есть браузер вычисляет высоту каждого строчного элемента, а по ней — высоту контейнера строки (от самой верхней до самой нижней точки ее дочерних элементов). В результате высоты контейнера строки всегда достаточно, чтобы вместить все его дочерние элементы (по умолчанию).

Каждый HTML-элемент на самом деле представляет собой стопку контейнеров строки. Если вам известна высота всех контейнеров строки, то известна и высота элемента.

При изменении приведенного выше HTML-кода следующим образом:

будет сгенерировано три контейнера строки:

Отчетливо видно, что второй контейнер строки больше остальных по высоте из-за вычисленной области содержимого его дочерних элементов, точнее того, который использует шрифт Catamaran.

Сложным моментом в создании контейнера строки является то, что мы, по сути, не можем ни увидеть, ни управлять им через CSS. Даже применение фона к ::first-line не помогает отобразить высоту первого контейнера строки.

line-height: о проблемах и прочих вопросах

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

Даже если это может показаться странным, у строчного элемента есть две различных высоты: высота области содержимого и высота виртуальной области (virtual-area) (я сам придумал термин «виртуальная область», поскольку эту высоту мы увидеть не можем; в спецификации этого термина вы не найдете).

Кроме того, сказанное опровергает распространенное мнение о том, что line-height — это расстояние между базовыми линиями (baseline). В CSS это не так.

В других редакторских программах это может быть расстоянием между базовыми линиями. Например, в Word и Photoshop это так и есть. Основная разница в том, что в CSS это расстояние есть и для первой строки.

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

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

Есть и другие виды строчных элементов:

В качестве сравнения: для шрифта Arial em-квадрат равен 2048 единиц, высота верхнего выносного элемента — 1854, нижнего — 434, междустрочный интервал — 67. Таким образом, при font-size: 100px область содержимого составит 112px (1117 единиц), а значение line-height: norma l — 115px (1150 единиц или 1,15). Все эти метрики индивидуальны для каждого шрифта и задаются дизайнером шрифта.

Небольшие подробности по поводу расчета line-box :

vertical-align: то свойство, которое управляет всем

Я еще не останавливался подробно на свойстве vertical-align, хотя оно является основным фактором для вычисления высоты контейнера строки. Можно даже сказать, что vertical-align может играть ведущую роль в строчном контексте форматирования.

Начнем с такого кода:

Но что, если у второго элемента font-size будет меньше?

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

Невидимый символ с видимым эффектом.

Итак, у нас все та же проблема, что и в случае с одноуровневыми элементами.

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

И наконец, vertical-align также принимает числовые значения, которые смещают контейнер выше или ниже относительно базовой линии. Этот последний вариант может пригодиться.

CSS восхитителен

Что, если, например, нам нужен текст шрифтом Catamaran с высотой прописных букв ровно 100px? Вроде выполнимо, так что давайте произведем некоторые расчеты.

Довольно просто, не так ли? Но как быть, если нам нужно, чтобы текст был визуально по центру, а оставшееся пространство равномерно распределялось сверху и снизу от буквы «B»? Для этого необходимо рассчитать vertical-align на основании соотношения между верхним и нижним выносными элементами.

Сначала вычислим line-height: normal и высоту области содержимого:

Затем нам потребуются:

Теперь можем вычислить vertical-align как разницу между этими расстояниями, умноженную на вычисленное значение font-size (Это значение нужно применить к строчному дочернему элементу).

И наконец, задаем необходимое значение line-height и вычисляем его, сохраняя вертикальное выравнивание:

Теперь довольно просто добавить графический элемент той же высоты, что и буква «B»:

Напоминаю, что этот тест показан исключительно для демонстрации, и полагаться на его результаты не стоит. Причин тут много:

Подведем итоги

Источник

Свойство line-height

Синтаксис

Описание

Свойство line-height (от англ. «line height» ‒ «высота строки») устанавливает расстояние между базовыми линиями двух соседних строк.

Примечание

JavaScript

Поддержка браузерами

Спецификация

Значения

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

Устанавливает процентное значение. Итоговая высота строки рассчитывается путём умножения процентного значения на размер шрифта элемента. При этом дочерние элементы наследуют итоговое, а не процентное значение.

Устанавливает числовой множитель. Итоговая высота строки рассчитывается как размер шрифта текущего элемента, умноженный на числовой множитель. При этом дочерние элементы наследуют сам числовой множитель, а не итоговое значение.

normal Устанавливает « line-height » в приемлемое значение для шрифта элемента.

Примечание: предполагается, что агенты пользователей будут устанавливать числовое значение « normal » в диапазоне от « 1.0 » до « 1.2 ».

inherit Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: « normal ».

Примечание: отрицательные значения не допускаются.

Источник