Я не придумал заголовок, потому что ПИЧОТ
Дело было так. Никита Прокопов написал пост, а в посте такое:
Туда же эпидемия с центрированием. Раньше были шутки, что на вебе сложно вертикально центрировать div. Сейчас этот вопрос вроде бы порешали, div центрировать можно, а вот с текстом все еще проблемы. Опять же, потому что правила совершенно идиотские, никто не знает, как условный line-height работает. На весь интернет может быть одна статья про него, где человек разобрался, а остальные просто на глазок подгоняют, я уверен. И дизайнеры шрифтов, кстати, тут вообще не помогают.
Этот пост попал в один дико секретный чат. В чате начались бурления, споры и осуждения ЦСС. На что я справедливо возразил, что ЦСС-то предлагает решение проблемы с вертикальным выравниванием текста. Вот же, смотрите, text-box-trim с января 2025:
https://developer.chrome.com/blog/css-text-box-trim
Если коротко, то границы текста в вебе проходят где угодно (как шрифтовик решит), но точно не на заглавных или базовой. Поэтому просто взять и задать 40 пикселей между заголовком и текстом, считая их от базовой до прописной, не получится. Это обходят, подбирая магические значения для отступов или добавляя «вытяжки» — псевдо-элементы или обертки с отрицательными маржинами равными отступам от текущих краев до прописной и базовой. Кстати, в письмах отрицательные маржины не работают, поэтому там только магические числа нахер так жить, пацаны
Чуваки из Хрома сделали text-box (короткий вариант text-box-trim и text-box-edge), который проводит границу текста строго по прописным, строчным и базовой. И запомнить нужно всего два варианта:
p {
text-box: trim-both ex alphabetic; /* Обрезаем по икс-хайту и базовой */
text-box: trim-both cap alphabetic; /* Обрезаем по кап-хайту и базовой */
}
А мне в чате и говорят:
Это плохое свойство, на мой взгляд. Создатели шрифтов не просто так рассчитывают высоту строки и кегельной площадки. Гораздо правильнее, мне кажется, договариваться с дизайнерами, что измеряем от краев области текста
И тут у меня бомбануло. Потому что тот, кто хоть раз пытался сделать четкие-строгие 30 пикселей от базовой до строчной между хотя бы 2-3 разными элементами, прекрасно понимает, что это комбинаторная сложность.
Покажу на примере. Пусть нам надо задать отступ ровно в 30 пк между h1, h2 сверху и p, img снизу. Отступ считаем от базовой до строчных. Считаем «вытяжки», сколько пикселей отнять сверху и снизу, чтобы воображаемый край проходил по базовым и строчным. Кеглей и интерлиньяжей у нас три пары (h1, h2 и p), получаем шесть вытяжек:
--h1-top-compensator: 5px;
--h1-bottom-compensator: 4px;
--h1-top-compensator: 4px;
--h1-bottom-compensator: 3px;
--p-top-compensator: 4.5px;
--p-bottom-compensator: 2.5px;
--gutter: 30px;
И начинаем описывать все возможные комбинации, чтобы этот отступ случился:
h1 + p {
margin-top: calc(var(--gutter) - var(--h1-bottom-compensator) - var(--p-top-compensator)); /* От 30 пк отнимаем нижний «излишек» у h1 и верхний у p */
}
h2 + p {
margin-top: calc(var(--gutter) - var(--h2-bottom-compensator) - var(--p-top-compensator));
}
h1 + img {
margin-top: calc(var(--gutter) - var(--h1-bottom-compensator)); /* А картинки блочные. Им вытяжки не нужны */
}
h2 + img {
margin-top: calc(var(--gutter) - var(--h1-bottom-compensator));
}
И чем больше поддерживаемых элементов, тем быстрее это говно разрастается. Комбинаторика!
А вот, как это решается с помощью text-box:
h1,
h2,
p {
text-box: trim-both ex alphabetic; /* Провели границы строго по строчным и базовой */
}
h1 + p,
h2 + p,
h1 + img,
h2 + img {
margin-top: var(--gutter); /* И просто задали отступ */
}
Создатели шрифтов, конечно, молодцы, но в вебе хотелось бы просто задавать отступы, а не дрочить пиксели, подбирая вытяжки и отступы. И я невероятно рад, что спустя 34 года веб наконец-то научился это делать.
P. S. Можно даже текст внутри кнопки нормально выровнять. Это че за анаконда иууу:
button {
text-box: trim-both cap alphabetic;
padding: 10px;
}