В прошлом совете я рассказал, почему разные шрифты с одинаковыми кеглем и высотой строки могут не выравниваться по базовой линии. Сегодня расскажу, как мы разбираемся с этим в наших проектах.
На новом сайте бюро текст стоит на сетке базовых линий:
Для того, чтобы добиться этого, пришлось много считать.
Например, нам нужно, чтобы между заголовком и следующим за ним абзацем был отступ в 4 шага сетки. Если просто задать заголовку такой отступ, то на деле получится фигня. Визуально отступ между заголовком и абзацем будет слишком большим, а абзац не встанет на сетку:
Это происходит потому, что визуальные границы текста не совпадают с границами строк, в которых текст содержится. Поэтому отступ приходилось подгонять, учитывая метрики шрифта:
h — реальный отступ между текстовыми элементами;
c — желаемое расстояние;
a — расстояние между нижней границей заголовка и его базовой линией;
b — дополнительная подгонка для того, чтобы абзац встал базовой линией на сетку
То есть для того чтобы задать правильный отступ от заголовка до следующего текстового элемента, обязательно нужно было знать, какой в этих элементах используется шрифт, его размер кегля и высоту строки. При добавлении нового элемента приходилось описывать все возможные сочетания с уже существующими элементами. Часто мы что‑то упускали или ошибались в расчётах. Поддерживать это было невозможно.
Чтобы разобраться с этой проблемой, мы завернули каждый текстовый элемент в обёртку. В зависимости от кегля шрифта и высоты строки задали текстовому элементу отрицательные отступы так, чтобы высота обёртки была равна шагу сетки, а нижняя граница проходила по базовой линии. Выглядит это так:
<!-- index.html -->
<h1>Заголовок</h1>
<p>Сновидение понимает ролевой
филогенез, так, например, Ричард
Бендлер для построения эффективных
состояний использовал изменение
субмодальностей.</p>/* style.css */
h1 {
font: 72px/72px 'Bureausans';
/* 72px - 12px - 17px = 39px */
margin-bottom: 39px;
margin-top: -19px;
}
p {
font: 'Bureauserif';
margin-bottom: -19px;
}<!-- index.html -->
<div class="heading">
<h1>Заголовок</h1>
</div>
<div class="textNode">
<p>Сновидение понимает ролевой
филогенез, так, например, Ричард
Бендлер для построения эффективных
состояний использовал изменение
субмодальностей.</p>
</div>/* style.css */
h1 {
font: 72px/72px 'Bureausans';
margin-top: -22px;
margin-bottom: -12px;
}
p {
font: 'Bureauserif';
margin-top: -17px;
margin-bottom: -19px;
}
.heading {
margin-bottom: 72px;
}
Таким образом, мы работаем с предсказумыми текстовыми блоками. Чтобы задать отступ между такими блоками, не нужно знать о метриках шрифта, а при добавлении нового элемента, достаточно один раз описать его отрицательные отступы.
Если вы решали похожую задачу другим способом, пишите, обсудим.