text-box-edge и text-box-trim: доступны во всех браузерах
• css
Введение
Недавно вышел Файерфокс 154, а это значит, что text-box-trim и text-box-edge доступны во всех браузерах:
Думаю, пришло время напомнить, что это за свойства и в каких случаях они полезны. А заодно порадуемся, что они заработали везде.
Чуть-чуть про отрисовку текста
Исторически занимаемое текстом место не равно физическому размеру букв в пикселях, а несколько больше. Дальше мы переходим к лайн-боксам, разным базовым линиям и метрикам шрифтов. Если кратко – то над и под буквами есть свободное место, которое зарезервировано под выносные элементы и подобное. И место это настраивается в шрифта, а значит, оно разное для разных пользователей.
Мы не можем полагаться, что у всех людей символы будут визуально рисоваться в одном и том же месте. Или можем?
text-box-edge и text-box-trim
Свойство text-box-trim позволяет задать обрезку пустого места вокруг букв, тем самым изменяя занимаемую высоту и выравнивание текста. Значение none задано по дефолту, а trim-start/trim-end/trim-both задают обрезку сверху/снизу/с двух сторон.
.text {
text-box-trim: trim-both;
}Однако его одного не хватит, чтобы что-то изменить, нужно задать и text-box-edge. Оно задаёт, по какой именно линии нужно обрезать прямоугольники с текстом. Для верхней линии можно указать значения text, ideographic, ideographic-ink, cap и ex, а для нижней – text, ideographic, ideographic-ink и alphabetic. Значения ideographic и ideographic-ink актуальны для китайского/корейского/японского (CJK) языков, поэтому остановимся на остальных значениях.
text в обоих вариантах использования означает обычное поведение, с ним ничего не обрежется.
cap означает верхнюю границу прописной (большой, заглавной) буквы.
ex отсылает к соответствующей единице измерения и означает верхнюю границу строчной (маленькой) буквы.
alphabetic означает нижнюю границу букв (как заглавных, так и строчных).
.text {
text-box-edge: ex alphabetic;
}Значения можно задать через пробел (сначала верхнее, затем нижнее). Если значения совпадают, можно указать одно ключевое слово.
Также есть сокращение через свойство text-box, которое объединяет оба рассмотренных свойства. В нём сначала нужно указать значение для text-box-trim, а затем для text-box-edge:
.text {
text-box: trim-both ex alphabetic;
}Примеры использования
Наверно, основным примером, который касается данных свойств, является выравниванием иконки относительно текста. vertical-align: middle в данном случае не подходит (так как не является визуальным центром), другие способы будут опираться на параметры конкретного шрифты и сломаются в случае фолбека или замены:
Схожий, но немного другой пример. Цифра или буква внутри маленького кружка. Исторически лучшего результата тут можно было добиться с помощью SVG, так как иначе текст мог смотреться или выше, или ниже нужного (в зависимости от шрифта, браузера, зума, операционной системы и так далее):
Выравнивание текста. Если по какой-то причине текст должен чётко попадать в нужные пиксели или иметь одинаковый отступ сверху и снизу над буквами,то text-box отлично справится с задачей:
Похожий пример: если нужно воспроизвести какой-то текст средствами CSS (например, внешний вид платёжной карты), то “лишние отступы”, особенно в случае разных шрифтов, могут привести к неточному позиционированию текста.
ascent-override и descent-override
В директиве @font-face можно задать дескрипторы ascent-override и descent-override, которые управляют аналогичными отступами.
Есть и важные отличия. text-box удобнее для описанных выше примеров за счёт работы в отдельных селекторах, в то время как дескрипторы для @font-face работают на весь шрифт целиком и в первую очередь предназначены для выравнивания шрифтов между друг другом (для случаев смены фолбечного шрифта на кастомный).
Итого
Наконец-то до нас добирается text-box. Подождём пару лет, и в инструментарии будет ещё одна возможность, которая иначе делалась бы костыльно или неточно.
Кстати, о хотелках. Там на горизонте замаячило свойство, которое может сократить ширину многострочного текста до реальной (а не быть равной ширине контейнера). Вот тогда вообще все мечты сбудутся.
Обсудить в Telegram
