x
 
Андрей Ерес
16 ноября 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Василий!

У меня вопрос к примеру из совета о вёрстке картинок: http://bureau.ru/bb/soviet/20170831/

У абзаца и заголовка третьего уровня одинаковые font-size и line-height. Почему заголовку надо задавать дополнительный отступ, чтобы он попал в интерлиньяж?

(Продолжение)


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

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

Сетку можно включить с помощью сочетания 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 пк
Текстовые блоки встают на сетку без дополнительных расчётов

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

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

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Занятия с 27 августа. Мы напишем вам, когда будет открыт набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Что делать с версткой под ИЕ? Как бороться с багами? (Часть третья: логи) Не преступление использовать Бутстрап? 2 Как бороться с багами? (Часть вторая: отслеживание ошибок)




Недавно всплыло

1 Может быть есть возможность разбавить «боль» Синельникова «кайфом» Синельникова? 6 1 1