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

На новом сайте бюро текст стоит на сетке базовых линий:

Сетку можно включить с помощью сочетания Ctrl+G на клавиатуре

Для того, чтобы добиться этого, пришлось много считать.

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

Хотим
Заголовок
Сновидение понимает ролевой филогенез, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей.
72 пк
На деле
Заголовок
Сновидение понимает ролевой филогенез, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей.
72 пк
Реальный отступ почти в полтора раза больше нужного, а абзац съехал с сетки

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

Заголовок
Сновидение понимает ролевой филогенез, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей.
c
h
a
b
h = c − (a + b), где
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;
}
Заголовок
Сновидение понимает ролевой филогенез, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей.
43 пк
Заголовок
Сновидение понимает ролевой филогенез, так, например, Ричард Бендлер для построения эффективных состояний использовал изменение субмодальностей.
72 пк
Текстовые блоки встают на сетку без дополнительных расчётов

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

Если вы решали похожую задачу другим способом, пишите, обсудим.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы