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

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

От автора: хотя мы можем применить к line-height любую единицу измерения CSS, значение без единиц измерения 1,5 является наиболее рекомендуемым способом его обработки.

Для начала, пояснительное изображение о том, как высота строки применяется браузером:

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

Как видите, высота строки распределена по разным областям:

«Область контента», которая будет равна примерно 1 в высоту.

«Область направляющих», то есть оставшееся пространство, распределяемое равномерно сверху и снизу.

Поэтому мы могли бы выразить это как:

CSS

1lineHeight = leading / 2 + content + leading / 2

Или:

CSS

1line-height: calc(0.25 + 1 + 0.25);

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

Поиск формулы

Чтобы получить более понятный способ, давайте взглянем на наши демонстрационные рисунки в таблице сравнения (вычисленные значения высоты строки приведены в пикселях для облегчения понимания):

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

Чтобы получить оптимальное значение line-height, нам нужно быть как можно ближе к значению 1.5 (15 пикселей) при меньших размерах шрифта, но ближе к 1.1 (55 пикселей) при более крупных. Подождите… 11px уже довольно близко к 15px. Мы всего в нескольких пикселях.

Итак, вместо того, чтобы начинать с 1.5, почему бы нам не перескочить? Мы могли бы начать с версии 1.1, добавив всего лишь несколько пикселей, которые нам нужны, что почти не будет иметь визуального различия в шрифтах большего размера, но будет существенно на меньших. Что-то вроде:

READ
10 приемов работы с VSCode, которые помогут ускорить процесс разработки React

CSS

1line-height: calc(2px + 1.1 + 2px);

Возвращаясь к нашей таблице сравнения вычисленной line-height:

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

Так-то лучше! Мы прибили это к маленьким размерам шрифтов, и довольно близко подошли к большим. К сожалению, line-height: calc(2px + 1.1 + 2px) недопустимо в CSS, так как значения единиц измерения не могут быть смешаны. Можем ли мы использовать какую-либо относительную единицу, которая вычисляется примерно до 1.1?

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

Фактически, можно использовать любую относительную единицу измерения (em, rem…), но, поскольку мы вычисляем высоту строки, имеет смысл использовать единицу высоты x.

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

CSS

1line-height: calc(2px + 2ex + 2px);

Как вы можете видеть в следующей демонстрации, это устанавливает подходщую высоту строки в широком диапазоне различных шрифтов:

Это действительный CSS. Кроме того, ex имеет очень хорошую поддержку браузерами. Ура!

Элементы-потомки

Если вы примените формулу к родительскому элементу и измените font-size дочернего элемента, line-height не будет затронут для дочернего элемента, поскольку он был рассчитан на основе font-size родительского элемента:

CSS

1234567891011.parent {  font-size: 20px;  line-height: calc(2px + 2ex + 2px);  /* computed: 2px + (2 * 20px) + 2px = 44px */} .parent .descendant {  font-size: 40px;  /* desired:  2px + (2 * 40px) + 2px = 84px */  /* computed: 2px + (2 * 20px) + 2px = 44px (same as .parent) */}
READ
Как настроить высоту строки в CSS

Это можно решить, применив формулу ко всем потомкам с помощью универсального селектора:

CSS

123.parent * {  line-height: calc(2px + 2ex + 2px);}

Об адаптивной типографике

Наша формула также помогает с адаптивной типографикой. Использование единиц измерения, связанных с областью просмотра (vw, vh, vmin, vmax) приводит к отсутствию тонкого контроля, поэтому мы не может изменять высоту строки при каждом изменении размера шрифта.

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

Автор: Jesús Ricarte

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий