Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (ascent, descent, line gap).
Из-за них текстовый элемент по box-модели почти никогда не совпадает с тем, как текст выглядит визуально: появляется лишнее пространство сверху и снизу, которое мешает точному вертикальному выравниванию.
Для этого в Chrome и Safari не так давно появился
text-box-trim — CSS-правило, позволяющее обрезать это дополнительное пространство и привести текстовый бокс к реальным границам глифов:.text {
text-box: trim-both cap alphabetic;
}
А вот и ссылка на статью в девблоге: https://developer.chrome.com/blog/css-text-box-trim
В Firefox пока не работает совсем.
Ранее похожий эффект достигался с помощью библиотек вроде Capsize и других `leading-trim`-решений. Они опираются на вычисление метрик конкретного шрифта и генерацию псевдоэлементов с отрицательными отступами, что усложняет систему, привязывает её к шрифтам и может создавать проблемы с производительностью при масштабировании.
text-box-trim — это попытка решить задачу на уровне браузера и сделать точную вертикальную типографику частью нативного CSS.Давно пора или классическая типографика — наше всё, котаны?
#css #trim