Визуальные границы текста не совпадают с границами строк и букв. В каждом шрифте есть «лишнее» пространство над строчными буквами и под базовой линией. От этого пространства дизайнеры чаще всего хотят избавиться, чтобы задавать отступы от базовой, икс‑хайта или кап‑хайта.
Например, на сайте бюро используется девятипиксельная сетка, она помогает добиться вертикального ритма на страницах, стандартизировать отступы, размеры элементов и кегли используемых шрифтов. По задумке все элементы на странице должны вставать на сетку своими краями, а текст — базовыми линиями.
Для осуществления «мечты дизайнера» нужна система, с помощью которой выравнивание элементов по сетке будет происходить автоматически, без ручной подгонки значений отступов. С элементами вроде картинок всё просто, они имеют явные края. Ставить текст базовыми линиями на сетку — проблема, потому что в ХТМЛ нельзя управлять вертикальным положением символа в строке.
Мы решаем эту задачу с помощью обёрток и вытяжек, отрицательных маржинов, подобранных так, чтобы скомпенсировать пространство над и под буквами:
<div class="textNode">
<p>Абзац текста</p>
</div>
p {
font-size: $medium-font-size;
line-height: $medium-line-height;
margin-top: -$medium-top-compensator;
margin-bottom: -$medium-bottom-compensator;
}
Абзац текста
К счастью, в ЦСС появились свойства, делающие то же самое, но в две строчки:
p {
text-box: trim-both ex alphabetic; /* Обрезаем по икс-хайту и базовой */
text-box: trim-both cap alphabetic; /* Обрезаем по кап-хайту и базовой */
}
Поддержка в браузерах пока хромает. Работает в последних версиях Сафари и Хрома.
Ещё по теме
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.