Думаю многие сталкивались с ситуациями, когда:
- текст внутри CSS-бокса не центрирован по вертикали
- над и под текстом есть пространство, которым нельзя управлять
- высота бокса с текстом в Figma не совпадает с тем, что получается в браузере
- не получается визуально выровнять иконку относительно текста
- текст внутри кнопки с одинаковым padding визуально не центрирован по вертикали.
Всё из-за того, что рендеринг текста в браузере — это крайне сложно. CSSWG совместно с разработчиками браузеров работают над исправлением ситуации и добавляют новые свойства для работы с текстом:
text-box-trim, text-box-edge и сокращённое свойство text-box. Эти свойства дадут нам некоторый контроль над текстовым боксом.Свойство
text-box-trim позволяет отрезать часть пространства бокса над и\или под текстом. Это “над” и “под” зависит от направления письма. Дизайнеры уже могут делать это в Figma, но в браузерах сейчас это невозможно.text-box-trim: none; /* Не обрезать, значение по умолчанию */
text-box-trim: trim-start; /* Обрезать начало (над текстом для ltr языков) */
text-box-trim: trim-end; /* Обрезать конец (под текстом для ltr языков) */
text-box-trim: both; /* Обрезать c двух сторон */
Свойство
text-box-edge определяет, где будет находиться граница бокса для отрезания пространства. Оно принимает одно или два значения и зависит от значения text-box-trim.text-box-edge: normal; /* Значение по умолчанию */
text-box-edge: text; /* Обрезать по границе текста */
text-box-edge: ex; /* Обрезать по высоте строчной буквы */
text-box-edge: cap; /* Обрезать по высоте заглавной буквы */
text-box-edge: ex alphabetic; /* Обрезать сверху по строчной букве, а снизу по границе baseline */
text-box-edge: cap alphabetic; /* Обрезать сверху по заглавной букве, а снизу по границе baseline */
/* есть ещё значения для CJK-языков (с иероглифами) */
Свойство
text-box является сокращением для text-box-trim и text-box-edge. На данный момент свойства доступны с Chrome и Edge 128+ и Safari 16.4+ за флагами. В скором времени планируется включить эти свойства для всех. С Firefox пока тихо, но у них тоже есть планы на этот счёт. Объяснить текстом это сложно, поэтому вот хорошая демонстрация с изображениями, playgroud для экспериментов (нужно включить флаг экспериментальных фич) и статья с более подробным объяснением.