line-height в CSS


Содержание

Межстрочный интервал line-height | CSS

Высота строки CSS

Чем отличается line-height от height или padding

padding — это отступ от height до границы элемента.

height: auto; (по умолчанию) — это

  1. height: 0;
  2. если присутствует текст, то сумма line-height всех строк [см. пример выше с расчётами]
  3. если есть дочерние элементы, то сумма их height , border , padding и margin

Изменить line-height:
Изменить height:

Расстояние между строк HTML

Междустрочный интервал можно узнать, если из line-height вычесть font-size . Причём значение межстрочного расстояния делится на два. Одна половина увеличивает отступ от буквы до верхнего края, другая — до нижнего. То есть получается, что текст располагается ровно по середине блока.

line-height наследуется от предка к потомку

Значение, заданное потомку, будет главнее того, что задано родителю.

Изменить line-height Зелёного потомка:
Изменить line-height Синего потомка:

Значение единственное, которое отталкивается от значения font-size элемента, а не от его родителя.

значение line-height в

line-height и HTML тег span

Элемент с display: inline; не может иметь height . Поэтому, ежели line-height родителя меньше line-height дочернего элемента, строчный потомок увеличивает высоту строки предка, на которой он находится. Между line-height нескольких строчных элементов, находящихся на одной строке, также выбирается то, что больше.

Изменить line-height родителя:
Изменить line-height строчного потомка:

‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it . The height and depth of the font above and below the baseline are assumed to be metrics that are contained in the font. [w3.org]

Иными словами, если font-size строчного элемента отличается от font-size блочного, то первый может увеличить высоту строки родителя, на которой он находится.

Изменить line-height:
Изменить font-size:

CSS свойство line-height

Свойство line-height устанавливает межстрочный интервал. Возможны три ситуации:

  • В элементах блочного уровня свойство line-height указывает минимальную высоту блоков строк внутри элемента.
  • В незаменяемых строчных элементах свойство указывает высоту, которая используется для вычисления высоты блоков строк.
  • В заменяемых строчных элементах свойство line-height не имеет никакого эффекта.

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

Для большинства браузеров line-height по умолчанию может быть от 110% до 120%.

Свойство line-height устанавливает высоту всей строки текста. Поэтому, если значение свойства line-height больше, чем значение элемента font-size, разница между ними будет соответствовать межстрочному интервалу.

Свойство line-height не имеет эффекта, если применяется к строчным элементам, например, кнопкам(buttons), изображениям(img) и т. д.

line-height

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit и неверно вычисляет высоту строк для изображений и элементов форм + + + +

Пример

Задаем высоту строки в %:

Описание и использование

Свойство line-height определяет высоту строки.

Примечание: отрицательные значения не разрешены

CSS свойство line-height

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

CSS синтаксис

Возможные значения

Значение Описание
normal Значение по умолчанию. Межстрочное расстояние устанавливается браузером.
множитель Число, используемое в качестве множителя от текущего размера шрифта.
значение Устанавливает фиксированное межстрочное расстояние, заданное в единицах длины CSS, — пиксели (px), сантиметры (cm), пункты (pt) и т.д.
% Устанавливает межстрочное расстояние в процентах от текущего размера шрифта.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример №1

Устанавливаем межстрочное расстояние в процентах

Пример №2

Межстрочное расстояние устанавливается при помощи числовых значений

Свойство line-height, высота строки

Окей, с помощью свойства font-size мы управляем размером отдельных символов шрифта. Но дело в том, что тексты — это обычно больше, чем набор символов. Тексты состоят из строк, которые располагаются друг под другом. И хотелось бы уметь управлять расположением этих строк относительно друг друга и другого контента.

Для этого в CSS есть свойство line-height . Оно управляет высотой строки или, если точнее, межстрочным интервалом.

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

По умолчанию это свойство имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта. Спецификация рекомендует устанавливать его в пределах 100-120% от размера шрифта. То есть:

Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо. Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px .

  • index.html Сплит-режим
  • style.css Сплит-режим


Сайт начинающего верстальщика

Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл интерактивные курсы по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.

Моё первое задание — вести дневник и честно писать обо всех своих свершениях.

Межсимвольный, межстрочный интервал CSS. Расстояние между словами

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.

Межсимвольный интервал CSS: letter-spacing

Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).

Пример записи межсимвольного интервала:

Интервал между словами: word-spacing

Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:

Межстрочный интервал: line-height

С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .

Ниже – пример, как сделать межстрочный интервал CSS:

На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Скриншот: интервалы в CSS

Итоги

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

Line-height в CSS

Классная статья. Спасибо за перевод. Давно хотелось с этим разобраться.

Алексей

Элемент (черная рамка) состоит из контейнеров строк (белые рамки), состоящих из строчных элементов (сплошные рамки) и анонимных элементов строки (белые рамки)

Видимо ошибка: и анонимных элементов строки (пунктирные рамки).

SelenIT (Автор записи)

Спасибо! Моя промашка(. Исправлено!

Владимир

Спасибо за статью, многое стало понятнее!

Алексей

По переводу: мне кажется в некоторых случаях переводите слишком буквально. По-русски фраза «В этом большая разница» будет звучать: «И в этом большая разница!» (хотя вообще, наверное, в зависимости от контекста). Аналогично, фраза «И в этом большая разница!» на английском будет переведена, вероятно, без And. И таких моментов может быть много (я не знаю, удачный ли я привёл пример). Пусть перевод будет чуть более вольный, но, при этом, не звучит нигде натянуто, если для смысла это не критично. Авторы привыкли говорить так, как принято там, где они общаются, но мысли их могут быть понятны и нам :-) Если типичные для слушателя обороты речи, смогут более естественно передать ОРИГИНАЛЬНОСТЬ АВТОРСКОЙ МЫСЛИ, то может лучше использовать их?
Напоминаю, что высота контейнера строки рассчитывается от самой высокой до самой низкой точки его потомков.
Тут ещё хорошо бы напомнить, что область содержимого находится ПОСЕРЕДИНЕ line-height. При первом прочтении это не очевидно :-)
А вообще статья просто превосходна! Очень порадовала.
Странно, а почему Вы не даёте ссылку на свою книжку? Скромничаете?
По-сути в этой статье разъяснены некоторые моменты, которые затрагиваются в Вашей книжке. Статья здорово её дополняет, развевает туман в некоторых местах, например вносит практически полную ясность в базовое понятие «высота строки», на котором многое строится и не понимая которое, очень сложно воспринять те или иные аспекты строчного форматирования и разобраться как же именно они работают…
ЗЫ: По поводу рассчётов в CSS тоже тут недавно вёл рассчёты (в Маткаде), чтоб понять откуда-докуда заливать градиент у траснформируемой фигуры. Не то, что это плохо само по себе, но всё же, в некоторых аспектах, пожалуй, несколько запутанно. Думаю, что некоторые дополнительные возможности (не упрощения!) сделали бы реализацию тех или иных вполне интуитивных задач более простой и надёжной. Вот как раз:
ЗЫЗЫ: Собираетесь ли Вы вносить в спецификацию, какие-то свои предложения, по строчному форматированию? :-)

SelenIT (Автор записи)

в некоторых случаях переводите слишком буквально

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

ещё хорошо бы напомнить, что область содержимого находится ПОСЕРЕДИНЕ line-height.

Не хотелось добавлять слишком много отсебятины переводчика. Чтобы не пришлось в итоге перечислять всё, из чего складывается расстояние от базовой линии до нижнего края «виртуальной области» (удачный авторский термин, кстати). Но спасибо за замечание, возможно, кому-то этот комментарий поможет быстрее разобраться!

По-сути в этой статье разъяснены некоторые моменты, которые затрагиваются в Вашей книжке. Статья здорово её дополняет

Именно поэтому я так спешил ее перевести:). Свежий взгляд на знакомую тему, причем за это время браузеры избавились от многих разночтений, более-менее удалось «разрулить» путаницу с переводом многозначных терминов типа «inline», и т.п.

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

Алексей

Слегка торопился успеть опубликовать перевод

Да в целом-то нормально, я просто обратил внимание, что когда читаешь переводные статьи то иногда сталкиваешь с такой конструкцией фраз, что понимаешь, что автор — англоговорящий (в данном случае даже француз %)

до намечавшегося на работе аврала

Эх, где взять хвалёную в Вашей статье Путь верстальщика «программистскую мудрость», чтоб знать: когда капать, а когда не капать :-))

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

спасибо за замечание, возможно, кому-то этот комментарий поможет быстрее разобраться!

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

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

Да, большая тема…
Спасибо!

Алексей

vertical-align: text-top / text-bottom выравнивают по верху или низу области содержимого
Но будьте осторожны: во всех случаях оно выравнивает виртуальную область, высота которой невидима
Так что к чему выравнивается? Область содержимого к области содержимого или виртуальную область, выравниваемого элемента, к области содержимого strut? (или даже не strut?! а, скажем, самого высокого элемента в строке? врят ли, ну а вдруг? :-) )

SelenIT (Автор записи)

Насколько я понимаю, виртуальную область выравниваемого элемента к родительской области содержимого (если у выравниваемого элемента есть инлайновый родитель — то к области содержимого этого родителя, если нет — к области содержимого strut родительского блока).

Алексей

Ну да, так, примерно и понял…

Алексей

Учтите, что этот тест только для демонстрационных целей. Полагаться на это нельзя. Причин много:
метрики шрифтов-то постоянны, но вот браузерные вычисления — не очень ¯⁠\⁠(ツ)⁠/⁠¯
если шрифт не загрузился, у резервного шрифта скорее всего другие метрики, а работать с несколькими разными значениями быстро станет практически нереально.

Интересную ссылку приводит автор (span-область наск. я понимаю, Content-Area). Посмотрев значения шрифтов в указанной автором программе, оказалось, что поймать вертикальный ритм не так просто. И у меня получилось сделать это в Хроме для размера шрифта, при котором размер его заглавных букв составил 200px (А вот при размере заглавных 120px ритм съезжал). Вот видимо почему — браузер округляет значения, в результате точное значение — не то значение, которое используется по факту. Кстати, в этой таблице нет размера заглавных, но наверняка используются тоже какие-то целые значения.
Интересно что в Хроме всё работает для двух шрифтов, при этом ощущение, что для Times шрифтовая площадка, всё же сдвинута на 1px вверх, и только для Arial всё нормально. При этом в Лисе всё постепенно съезжает…


Чтобы не пришлось в итоге перечислять всё, из чего складывается расстояние от базовой линии до нижнего края «виртуальной области»

можно воспользоваться вот этой шпаргалкой (изображение кликабельно). Но, что бросается в глаза: некоторые отличия литерных площадок от виртуальных. Во-первых em-квадрат и line-height теперь разные вещи, одно строится в пространстве другого(или другое строится в координатах первого), но теперь это разные понятия связанные друг с другом лишь относительно.
И второе, следующее из первого, line-height теперь не меряется как расстояние между базовыми линиями, а, насколько я понимаю, от верхнего half-leading до нижнего (или наоборот, без разницы). При этом сам leading стал понятием условным, лидинги напрямую друг с другом не контактируют, а контактируют line-box (хотя понятно, что самая верхняя и самая нижняя точка line-box это чей-то half-leading, причём, я так понимаю, это верно, даже если в строке есть замещаемые элементы или inline-block, поскольку, из чего бы они не состояли, они лежат в области содержимого, а только халф-лидинги шрифтов образуют межстрочное расстояние, которое отделяет содержимое одного лайн-бокса, от другого).

Алексей

причём, я так понимаю, это верно, даже если в строке есть замещаемые элементы или inline-block

Похоже что путаю: и тем и другим плевать на лидинги(кроме возможно, случае vertical-align text-top и text-bottom), они видят контейнер (строка — лайнбокс) и укладываются в него как им удобнее :) Если такой элемент самый высокий в строке (или vertical-align указан как top или bottom), то замечательно умещаются до краёв виртуальной области строки.

Алексей

Тут такой вопрос возник: как связаны безразмерное значение line-height и значение, в единицах измерения?
Я считал, что line-height: 1 это тоже самое что 1em. То есть, если размер font-size: 16px, то,
если мы зададим line-height: 1 то он будет равен 16px.
Но тут неожиданно оказалось что значения безразмерного коэффициента, и это же значение, умноженное на font-size, незначительно различающиеся значения.
Кто-нибудь может мне объяснить, в чём тут дело?

SelenIT (Автор записи)

В первом приближении оно и должно быть равно 1em. Могут быть разве что нюансы до пикселя из-за округления. Можно увидеть пример различия?

Разница между line-height: 1 и line-height: 1em в том, как они наследуются: для размерных величин наследуется то значение в пикселях, которое получается для родительского элемента, а для безразмерных — сам коэффициент, который для каждого дочернего элемента заново умножается на его font-size.

Алексей

В первом приближении оно и должно быть равно 1em. Могут быть разве что нюансы до пикселя из-за округления. Можно увидеть пример различия?

Да, вот пример. Голову сломал — почему ритм не сходится? Всё 10 раз перепроверил, и неожиданно выяснилось, что если поменять значение line-height на размерное, то всё сходится(43-44 строчки).
Соответственно, возник вопрос — почему?

Разница между line-height: 1 и line-height: 1em в том, как они наследуются: для размерных величин наследуется то значение в пикселях, которое получается для родительского элемента, а для безразмерных — сам коэффициент, который для каждого дочернего элемента заново умножается на его font-size.

Ну, в приведённом примере, лайн-бокс, насколько я понимаю, формируют strut, который либо умножаешь на фонт-сайз, либо оставляешь безразмерным. У дочернего span line-height задано как normal, который заведомо меньше strut, а большОй белый элемент справа — абсолютно позиционирован, соответственно на размер родителя(а соответственно и размер строки) влиять не должен.
Может, конечно, я где-то что-то проворонил и дело не в этом, но открытием было именно то, что когда умножаешь безразмерное значение на фонт-сайз, ритм выстраивается…

Алексей

Как я уже говорил с большим удовольствием прочитал статью, и выяснил для себя, некоторые пробелы, которые у меня, к сожалению, остались после прочтения Вашей книжки.
Автор очень подробно рассказывает о том, что же действительно происходит в строке, и, возникает ощущение, что теперь, я примерно понимаю, что же действительно происходит в строке – по крайней мере что касается, вертикальной составляющей, а она, насколько я понимаю, в вебе, основная.
Кстати, в примере, приведённом в статье, ContentArea (область содержимого), похоже, названо тем, что, по-идее, является виртуальной областью (правда у разобранного автором шрифта значение line-gap(межстрочного расстояния) равно нулю, а значит область контента и область содержимого совпадают). Но у других шрифтов может быть по-другому.
Тем не менее, обстоятельно рассказав теорию, пример, на мой взгляд, автор пояснил немного бегло. Причём общая идея примера, достаточно прозрачна, но всё же, практика показывает, что есть нюансы. И, если интересно, не только понять о чём речь, но и увидеть, что с чем будет взаимодействовать, и какие возникают пути решения, то остаются вопросы.
Попробуем разобраться, что в принципе происходит в строке такого, что поможет нам увидеть вертикальный ритм в строке и понять как работает выравнивание.
На мой взгляд, если попытаться выразить идею вертикального выравнивания одним словом, то слово это будет «относительное». Строки заполняют пространство документа с верху вниз, соответственно каждая строка, своим верхним краем, упирается в верхнюю строку (или начало документа), располагая своё содержимое вниз, расширяясь, при этом, с тем, чтоб уместились все её элементы, учитывая их вертикальное расположение, друг относительно друга. Элемент, расположенный в строке выше всех, упирается своей верхней частью, в верхнюю часть строки и чем выше он расположен, тем больше пространство строки увеличится вниз, а значит сместит вниз и находящиеся в ней элементы. Таким образом, элемент может поменять своё положение не только изменив собственное значение vertical-align, но и под влиянием соседей. Значение вертикального выравнивания показывает положение элемента в строке относительно других элементов строки.
В блоке есть текстовый потомок по-умолчанию, называется strut (про который сказано и в статье и в книжке). Мало того, что он передаёт по-наследству свои строчные параметры, так он ещё и незримо присутствует в строках блока, обуславливая, тем самым её минимальный размер. Насколько мне известно, избавится от его влияния можно только задав блок-обёртку с другими параметрами. Для эксперимента, можете сделать блок со свойством line-height: 100px, и попробовать сделать в любом месте блока расстояние между строками размером, скажем, 16px, используя только строчное форматирование. Как сделаете, мне обязательно расскажите :-)
Влияние этого блочного потомка, strut, обязательно нужно учитывать. Он может присутствовать незримо и совпадать со своим видимым коллегой, особенно если коллега безымянный и пользуется по-умолчанию тем, что ему досталось от этого strut, но влияние strut неожиданно может проявиться. Получается, в заполненной строке, УЖЕ есть два элемента: текущий и strut.
А поскольку выравнивание, во многом, относительное, то либо элемент выравнивается, относительно strut, либо strut относительно элемента. Вот – основной теоретический каркас, на котором строится всё выравнивание. Стоит ещё отметить что для strut напрямую задать вертикальное выравнивание нельзя, его расположение – некая блочная базовая линия, положение которой, впрочем, может меняться под влиянием других элементов в строке.
Продолжу в следующем комментарии…

Алексей

Теперь давайте посмотрим на задачу, предложенную в статье: сделать высоту строки, пропорциональной заглавным буквам определённого шрифта, при этом, сами заглавные буквы, должны находится ровно посередине строки.
Первое, что приходит в голову, это сделать strut большим (задав большой line-height для содержащего блока), а элемент двигать относительно него. Такой подход имеет очевидный недостаток – все строки в блоки будут далеко друг от друга. Если блок для этого и создан, то, как говорится – нет проблем, а если это общий контейнер, где каким-то элементам нужно придать определённые свойства, то это может мешать. Рецепт лечения такой бяды понятен – блок-обёртка (либо для участков где нужна большая строка, либо для участков, где строка нужна маленькая, нивелируя влияния большой на маленькую), насколько он оправдан в каждом конкретном случае – зависит от того, насколько мы не хотим загружать html проблемами CSS :-)
Известно, что область содержимого лежит посередине виртуальной области, а значит если в области содержимого, заглавные буквы будет находится посередине, то они будут находится и посередине строки. Параметры шрифта посмотрим, в указанной в статье программе FontForge, расстояния от края области содержимого до ближнего края заглавных букв посчитаем по примеру в статье (от низа – расстояние нижних выносных элементов, верх – разница между верхними выносными элементами и заглавной буквой).
Сравним эти расстояния – какое-то из них, вероятно будет чуть больше. Значит нужно сдвинуть в противоположную сторону настолько, чтоб эти расстояния выровнялись. Посчитаем разницу между этими расстояниями, половина разницы – будет посередине. Значит если мы сдвинем на это расстояние, с одной стороны прибавится, в с другой, настолько же, убавится, и буква выровняется по центру. Замечу, что двигать букву, относительно её базовой линии (и соответственно остальных строчных параметров) средствами CSS не получится. Но на деле, мы двигаем букву относительно strut, который, в виду своих больших размеров, и формирует строку.
Итак, проба для шрифта Times New Roman, и для шрифта Arial. В Хроме и Лисе всё работает – смотрим вертикальный ритм, еле уловимый, словно шум моря из ракушки. Похоже, для Arial в Chrome ритм не идеален.
Здесь и далее, смотрите примечания к коду.

Алексей

Второй вариант, логично напрашивающийся, это сделать большой span и маленький strut. Но, как не сложно догадаться, сделать его значительно сложнее – относительно чего будет двигаться наше строчное содержимое, если оно и есть самый большой элемент в строке? Скорее, всё остальное (в том числе и strut) будет двигаться, и только потом сам элемент. Поэтому случай с маленький strut мы оставим на закуску, а займёмся вторым вариантом (который, кстати, похоже и был разобран в статье).
Принцип взаимодействия этих элементов отличается: если в случае, когда strut был большим, то только он принимал участие в формировании строки, span же целиком помещался в его пространстве, то теперь оба элемента имеют влияние на высоту строки. И, если мы изменим положение одного, относительно другого, то элемент, оказавшийся выше, будет упираться в верх строки, а ниже – в её низ. Высота строки же вырастет на величину сдвига.
По-идее, если расстояние от верхнего края заглавной, до края области содержимого, чуть больше чем аналогичное расстояние внизу, то уровнять мы можем либо немного уменьшив расстояние вверху, либо немного увеличив расстояние внизу. Уменьшая или увеличивая line-height, мы обрежем или дополним элемент с двух сторон, при этом разница, между расстоянием до верха и до низа, никуда не денется – и её потребуется чем-то скомпенсировать. Чем же?
Итак, у нас есть два расстояния от заглавной буквы, до верха и до низа строки. Находящиеся на одном уровне два элемента одинаковый высоты, занимают минимальную возможную для них высоту, и любой сдвиг одного из них, приведёт к увеличению строки. Для того, чтоб меньшее расстояние стало равным большему, нужно сдвинуть второй элемент в сторону увеличиваемой стороны, на расстояние этого увеличения (второй элемент, при этом, играет, своеобразную роль заглушки). Соответственно, размер этого сдвига, равен разнице между меньшим и большим расстоянием (от верхнего края буквы или от нижнего края, буквы до ближайшего для него края строки). Что же это за второй элемент? – strut.
Понятно, что удобней двигать (воздействовать на) сам элемент, поскольку strut затрагивает всё содержимое блока, а элемент, только самого себя и влияет только на ту строку, в которой лежит. Как мы помним, вертикальное выравнивание относительно, а значит, для того, чтоб сдвинуть strut, например, вниз, мы можем поднять элемент вверх. При этом, поскольку элементы одинаковые, строка увеличится на величину сдвига.
Единственная сложность, в данном случае, что размер строки нужно привести к размеру заглавных букв. Если в предыдущем примере, сделать это было относительно легко – мы просто увеличивали strut (предварительно посчитав его размер в заглавных буквах), то теперь, на размер строки влияют два элемента, каждый из которых чуть-чуть меньше полного размера строки. Но, поскольку, понятно, насколько они меньше (на величину сдвига), то высчитать зависимость наших элементов от величины заглавных не составит большого труда. В общем, этот способ не намного сложнее, и, тем не менее, для его успешной реализации, пришлось переписать большую часть кода, сделав алгоритм расчёта, по возможности, более прозрачным.
В данном случае, кстати, приходится «вручную» смотреть какое расстояние больше – до верха или до низа. Благо считается это просто, да и в коде результат нужно вставить всего в паре мест, но всё-таки, пожалуй, небольшое неудобство. Отмечу, что размер сдвига, по сравнению с предыдущим примером, в два раза больше: здесь разница, между расстоянием от заглавной до верха, и до низа, а в предыдущем – лишь половина разницы.
Вот результат, для Arial и для Times New Roman. Хром-Лиса полёт нормальный :)

Алексей

Ну и, наконец, третий случай, strut маленький, а элемент большой. Как быть? Решение простое, как дрова — псевдоэлемент :-) Он берёт на себя функции второго элемента (равной высоты) и выравниваясь относительно текущего элемента, выравнивает элемент.
Пример для Arial и Times. Поскольку такое решение – на подобии второго примера, наверное, можно сделать и на подобии первого: элемент маленький, псевдоэлемент большой, элемент выравнивается относительно псевдоэлемента. Технически, правда, придётся сделать наоборот – выравнивать псевдоэлемент относительно элемента, но с тем, чтоб двигался именно элемент. Возможны нюансы :-) Рассмотреть подобный случай оставлю на Ваше усмотрение…
В итоге, я нашёл два способа: один когда регулируется маленький элемент относительно большого, и второй – когда два одинаковых (или близких по размерам?!) элемента, и они регулируются друг относительно друга, один упирается в верхний край строки, другой — в нижний. Какой из способов лучше? Даже не знаю, пожалуй, третий :-) Вариант с псевдоэлементом, несёт, пожалуй, наибольшую практическую ценность, поскольку не затрагивает блочные настройки. Но я делал псевдоэлемент по второму варианту, можно попробовать и сделать по первому… Думаю, что понимание, как работают оба способа, полезно в любом случае и рано или поздно может Вам пригодится :)

Алексей

Что-то я не могу найти горизонтальные характеристики шрифта Georgia, а именно letter-spacing (именно это значение, насколько я понимаю, используется для рассчитываня отступа между инлайн-блоками), перерыл весь FontForge, там есть какие-то туманные характеристики, вроде максимальное и минимальное растяжение пробела, а также пробел в конце предложения, впрочем, возможно в зависимости от пары символов расстояние между ними будет различаться… Ну а какое оно тогда между инлайн-блоками?
opentype.js указанный в статье тоже не понятен, скармливаешь ему шрифт, он этим шрифтом пишет некий текст, а список параметров так и приводится в виде ссылок, нажимая на которые, попадаешь в некие пространные описания…

SelenIT (Автор записи)

Я полагаю, что расстояние между инлайн-блоками — это обычная ширина (advance width) символа пробела (код 32). А эксперимент показывает иное?

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Line-height и vertical-align — это простые CSS свойства. Они настолько просты, что большинство из нас убеждено в том, что в полной мере понимают, как они работают и как их использовать. Но это не так. В действительности же они сложны. Можно даже считать, что они являются самыми сложными свойствами, т.к. они играют важную роль в создании мало известной особенности CSS: в строчном форматировании текста.

Например, line-height может быть установлен в качестве длины или безразмерного значения, но по умолчанию у него задано значение normal. Окей, но что такое normal? Пишут, что чаще всего это 1 или может даже 1.2. Но даже в спецификации по CSS нет ясного ответа на этот вопрос. Мы знаем, что line-height — безразмерное свойство относительно родительского значения font-size, но проблема заключается в том, что font-size: 100px выглядит по разному, в зависимости от семейства шрифта. Вопрос: значение line-height всегда одинаковое или разное? Действительно ли значение варьируется между 1 и 1.2? А vertical-align? Каково его влияние в отношении line-height?

Глубокое погружение в CSS не такой простой механизм…

Давайте сперва поговорим о font-size

Посмотрите на простой HTML код. Тег p содержит три span , каждый из которых имеет свой собственный font-family :

Используя некоторое значение font-size с различными font-family, мы получаем элементы разной высоты:

Разные font-family, одинаковое значение font-size, получаем разную высоту элементов

Почему font-size: 100px не создает элементы с высотой в 100px? Я измерил и получилось:

  • Helvetica — 115px;
  • Gruppo — 97px;
  • Catamaran — 164px.

Элементы со значением font-size:100px имеют разную высоту

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

  • шрифт определяется его em-квадратом (или единицей em) своего контейнера, в котором будет нарисован каждый символ. Этот квадрат использует относительные единицы и обычно устанавливает значение на уровне 1000 единиц. Но здесь также может применяться значение 1024, 2048 и т.д.
  • устанавливается на основе своих относительных единиц, показателей шрифтов (ascender, descender, capital height, x-height и т.д.). Обратите внимание, что некоторые значения могут выходить за пределы em-квадрата.
  • в браузере относительные единицы масштабируются, чтобы нужный размер соответствовал шрифту.

Давайте возьмем шрифт Catamaran и откроем его в FontForge, чтобы получить его показатели:

  • em-квадрат 1000;
  • Ascender — 1100 и Descender — 54. После выполнения некоторых тестов, окажется, что браузеры используют значения HHead Ascent/Descent на Mac OS, а также значения Ascent/Descent на Windows (эти значения могут отличаться!). Отметим также, что прописная буква имеет высоту 640px и высота обычной буква составляет 485px.

Значения шрифта в FontForge

Это значит, что шрифт Catamaran использует 1100 + 540 единиц при 1000 единиц в em-квадрате, который дает высоту 164px, в то время, как в настройках указано font-size: 100px . Эта вычисленная высота определяется как контент-область (content-area) элемента и я буду использовать этот термин далее в этой статье. Вы можете думать о контент-области, как об области, для которой применяется свойство background .

Мы также можем увидеть, что заглавные буквы имеют высоту 68px (680 единиц) и строчные буквы (x-height) — 49px (485 единиц). В результате, 1ex = 49px и 1em = 100px, а не 164px (к счастью, em основан на размере шрифта, а не на вычисленной высоте).

Шрифт Catamaran: эквивалент UPM и пикселей при использовании font-size: 100px

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

Каждый HTML-элемент на самом деле является неким множеством, состящим из line-boxes. Если вы знаете высоту каждого line-box, Вы знаете высоту элемента.

Если обновить предыдущую страницу HTML код, то получим:

Он будет генерировать три line-boxes:

  • первый и последний, каждый из которых содержит единственный встроенный элемент (содержание текста)
  • второй, содержащий два встроенных элемента и три span>


Тег (черная рамка) сделана из line-boxes (белые границы), которые содержат inline-элементы (сплошные границы) и анонимные inline-элементы (пунктирные границы)

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

Трудным в создании line-box является то, что мы не можем видеть и управлять им с помощью CSS. Даже применяя background с псевдоклассом : : first-line не дает нам ни какой визуальной подсказки о высоте line-box.

line-height: к проблемам и за ее пределами

Ранее я ввел два понятия: контент-область (content-area) и line-box. Если вы читали внимательно, то я сказал, что высота line-box вычисляется в соответствии с его дочерней высотой, я не сообщал дочерним элементам высоту их контент-области. В этом и заключается больше различие.

Хотя это может показаться странным, inline-элемент имеет две разные высоты: высоту content-area и высоту virtual-area (Я изобрел термин virtual-area , обозначая таким образом высоту, невидимую для нас. Этого термина Вы не найдете в спецификации).

  • высота content-area определяется показателями шрифта (как показано выше)
  • высота virtual-area — это line-height , а также это высота, которая используется для вычисления высоты line-box

Inline-элементы, имеющие две разные высоты

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

В CSS, the line-height — это не расстояние между двумя базовыми линиями

Рассчитанная разность высот между virtual-area и content-area называется ведущей. Половина этой ведущей добавляется к верхней части content-area, другая часть — к нижней. Content-area располагается всегда в центре virtual-area.

На основе его значений, line-height (virtual-area) может быть больше, меньше или равной content-area. В случае меньшего размера virtual-area, ведущее значение станет отрицательным и line-box стане визуально меньше его дочернего элемента.

Существуют также другие виды inline-элементов:

  • inline-элементы ( img> , input> , svg> , etc.)
  • inline-block и все inline-* элементы
  • inline-элементы, которые используются в качестве форматирования текста (например, во flexbox-элементах)

Для этих inline-элементов, высота вычисляется на основе height , margin и border . Если height имеет значение auto , то line-height используется в content-area и строго равна line-height .

Inline замещаемые элементы, inline-block/inline-* и blocksified inline элементы имеют контент-область, равную их высоте или высоте линии

Итак, вернемся к FontForge. Em-квадрат шрифта Catamaran равен 1000, но мы видим значения ascender/descender:

  • Ascent/Descent: ascender — 770 и descender — 230. Используется для символьных рисунков. (табл. “OS/2”)
  • показатели Ascent/Descent: ascender — 1100 и descender — 540. Используется для высоты content-area. (табл. “hhea” и табл. “OS/2”)
  • показатель Line Gap. Используется дл line-height : normal , путем добавления этого значения показателей Ascent/Descent. (табл. “hhea”)

В нашем случае, шрифт Catamaran определяет разрыв в 0 единиц для line gap, поэтому line-height : normal будет равен content-area, который составляет 1640 единиц, иначе 1.64.

В качестве сравнения, шрифт Arial описывает em-квадрат в 2048 единиц, ascender — 1854, descender — 434 и line gap составляет 67. Это означает, что font-size : 100px дает content-area — 112px (1117 единиц) и line-height : normal — 115px (1150 единиц, иначе 1.15). Все эти показатели шрифта устанавливаются разработчиком шрифта.

Становится очевидным, что установка line-height : 1 плохая практика.Я хотел бы напомнить вам, что безразмерное значение относительно для font-size и virtual-area меньше, чем content-area. Именно это и является источником многих наших проблем.

Используя line-height: можно создать line-box меньше, чем контент-область

Уточнения о вычислении line-box:

  • для inline-элементов, padding и border увеличивают область фона, но не высоту content-area (или высоту line-box).Сontent-area — это не всегда то, что ты видишь на экране. margin-top и margin-bottom не имеют ни какого эффекта.
  • для inline-элементов, inline-block и blocksified inline-элементы: padding , margin и border увеличивают height , а значит увеличивают content-area и высоту line-box

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

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

Значение по умолчанию — baseline . Помните о показателях шрифта ascender и descender? Эти значения определяют, где базовая линия стоит, а значит определяет и ее соотношение. Т.к. соотношение между ascenders и descenders редко бывает 50:50.

Тег p> с двумя span> унаследовал значения font-family , font-size и имеют постоянный line-height . Базовые линии (baselines) будут соответствовать и высота line-box будет равна их line-height .

Те же значения шрифта, одинаковые исходные условия, кажется, что все в порядке

Что делать, если второй элемент имеет меньший font-size ?

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

Меньший дочерний элемент может привести к увеличении высоты line-box

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

Рассмотрим еще один пример. Тег p> с line-height : 200px , содержащий один span> , унаследовал значение line-height

Насколько высок line-box? Следует ожидать, что 200px, но это не так. Проблема здесь заключается в том, что p> имеет свой собственный font-family (по умолчанию serif ). Базовые линии тега p> и span> скорее всего, будут различны, а высота line-box выше, чем ожидалось. Это происходит потому, что браузеры производят вычисления следующим образом: так, как если бы каждый line-box начинался бы с нулевой ширины символа.

В итоге, мы столкнулись с той же проблемой, что и в предыдущем примере.

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

Базовая линия скачен, но что можно сказать на счет vertical-align : middle ? Как пишут в спецификации, middle “выравнивает вертикальную среднюю точку контейнера с базовой линией родительского контейнера плюс половина x-height родительского блока”. Соотношение базовых линий различны, а также как различно соотношение x-height, следовательно выравнивание middle не надежно. Как правило, middle никогда не бывает по “середине”. Этому способствуют много факторов в CSS (x-height, ascender/descender соотношение, и тд.)

В качестве примечания:

  • vertical-align : top / bottom выравнивает по верху и низу line-box
  • vertical-align : text-top / text-bottom выравнивает по верху и низу content-area

Vertical-align: top, bottom, text-top и text-bottom

Но используйте с осторожностью, это выравнивает virtual-area. Посмотрите это на простом примере, используя vertical-align : top . Невидимый line-height может привести к странным, но не удивительным, результатам.

vertical-align может привести к нечетным результат на первых порах, но предполагается, что line-height создаст визуализацию

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

CSS превосходен

Мы поговорили о том, как line-height и vertical-align работают вместе, но теперь вопрос: можно ли управлять показателями шрифта с помощью CSS? Короткий ответ: нет.

Что делать, если, например, мы хотим, чтобы текст с помощью шрифта Catamaran, где высота заглавной буквы 100px стал выше? Давайте немного займемся математикой.

Сначала мы устанавливим все показатели шрифта в качестве CSS-свойств, а затем вычислим font-size ,чтобы получить высоту заглавной буквы 100px.


Высота заглавной буквы — 100px

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

Во-первых, установим line-height : normal и высоту content-area:

Затем нам нужно установить:

  • расстояние от нижней части буквы к нижнему краю
  • расстояние от верхней части буквы к верхнему краю

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

В конце концов, мы устанавливаем желаемый line-height и вычисляем его при сохранении вертикального выравнивания:

Результат установки для line-height разных значений. Текст всегда располагается по середине.

Добавить значок, высота которого соответствует букве «B», теперь легко:

Иконка и буква B имеют одинаковую высоту

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

  • показатели шрифта могут быть не постоянными ¯⁠\⁠(ツ)⁠/⁠¯
  • если шрифт не загружен, то резервный шрифт, верноятно, будет иметь различные показатели шрифта и иметь дело с несколькими значениями, а значит — станет не управляемым.

CSS урок 17. Интервал между строками

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

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

А что может быть дороже удобства посетителя сайта?

Свойство line-height

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

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

На иллюстрации выше вы можете видеть высоту строки, обозначаемую как line-height. Непосредственное расстояние между ними принято называть leading.

Например, если мы зададим расстояние между строками равное 24 пикселям, а размер шрифта 16 пикселям, то leading у нас будет равняться 8 пикселям (24-16).

Допустимые значения

В качестве значений можно использовать все те же пиксели, em и проценты, с которыми мы познакомились в уроке по размеру шрифтов. Например, давайте попробуем установить межстрочный интервал в 24 пикселя.

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

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

Как видно на примере выше, можно использовать как проценты, так и em. Они абсолютно равнозначны.

Лучшее решение

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

Например, дадим шрифтам тега body размер в 12 px, и интерлиньяж в 150 процентов. Значит, конечное значение будет равняться 18 пикселю.

Далее, поменяем кегль текста в абзацах на 20 px. В этом случае, межстрочный интервал будет не 30 px (18*1.5), как ожидалось, а останется 18 px, который был унаследован от тега body.

Множитель

Для задания интервала между строками лучше использовать множитель — простое числовое значение, которое, между прочим наследуется надлежащим образом.

В данном примере, межстрочное расстояние всегда будет в полтора раза больше размера текста. Даже при наследовании.

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

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

line-height

Свойство CSS line-height используется для указания точной высоты межстрочного интервала встроенного (inline) элемента, если оно воздействует непосредственно на этот элемент, и он не содержит каких-то других HTML-элементов. Если же line-height указывается для элемента, содержащего несколько встроенных элементов, то оно определяет минимальную высоту межстрочного интервала.

В CSS межстрочным интервалом (интерлиньяжем) называется расстояние между базовыми линиями двух соседних строк. А базовая линия — это воображаемая линия, проходящая по нижнему краю символов. Некоторые буквы (щ, ц, у, д, р, ф) частично выходят за нее.

Межстрочный интервал — line-height.

Тип свойства

Применяется: ко всем элементам, но оно не будет иметь результата для замещаемых элементов (например, изображений), у которых высота задается свойством height.

Значения

Значением свойства line-height является указание размеров межстрочного расстояния одним из следующих способов:

  • normal — межстрочное расстояние вычисляется браузерами исходя из размера шрифта элемента. Как правило, оно равно размеру шрифта или больше его на 20%.
  • Размеры — расстояние в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения запрещены.
  • Число — Любое положительное целое или дробное число. В этом случае расстояние между строк равняется размеру шрифта (font-size) умноженному на это число.
  • Проценты — значение в процентах (%), где за 100% берется размер шрифта элемента. Отрицательные значения (-20%) указывать нельзя.
  • inherit — наследует значение line-height от родительского элемента.

Процентная запись: относительно размера шрифта элемента.

Значение по умолчанию: normal.

Синтаксис

Пример CSS: использование line-height

Результат. Использование свойства CSS line-height.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit .

Илон Маск рекомендует:  Общие принципы построения систем защиты от копирования
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL