Для CSS создают параметр leading-trim: он исправит видимый беспорядок между строками текста при равных отступах в коде Статьи редакции

Из-за особенностей кода между блоками текста появляется лишнее пространство. Новый параметр должен справиться с загвоздкой.

В начале июня 2020 года разработчики CSS предложили новый пакет спецификаций, где упоминается параметр leading-trim. Он позволит обрезать поля вокруг текста по заданным параметрам. Когда разработчики его добавят, неизвестно.

Дизайнер Microsoft Итан Ванг считает: это свойство решит проблему веб-дизайна последних 24 лет, когда настроить междустрочный интервал было крайне сложно.

В чём заключалась проблема

Между частями текста появляется лишнее пространство, когда расстояние между ними измеряется по границам текстовых блоков, а не по границам букв внутри. На иллюстрации ниже блоки распределены равномерно — между ними 32 пикселя. Но на деле разрывы больше и не сочетаются друг с другом.

Такая проблема появилась во время создания CSS1 в 1996 году. Программисты разделили интерлиньяж (междустрочный интервал) пополам: половина над текстом, половина под. Они назвали это свойство half-leading.

У каждого размера шрифта внутри семейства есть высота строки по умолчанию. Она должна быть больше, чем текст в ней, чтобы размещать определённые символы и акцентирующие знаки. С увеличением высоты строки добавляются два half-leading, и текстовое поле становится ещё больше.

«Этот половинчатый интервал вместе с дополнительным пространством для высоты строки — корень сегодняшних разочарований в текстовых полях», — пишет Ванг.

Что делает leading-trim

С помощью этого параметра можно обрезать пустое пространство вокруг текстового блока по значениям, нужным пользователю.

Например, в коде можно использовать ещё один новый CSS-параметр — text-edge. Он указывает браузеру, что края текста — высота верхнего края букв и базовая буквенная линия. По этому параметру идущий следом leading-trim обрежет пустые поля.

h1 { text-edge: cap alphabetic; leading-trim: both; }
Слева — текст без leading-trim, справа — с ним

Что об этом думают российские дизайнеры

Новый параметр на первый взгляд решает проблему пустого пространства внутри текстового бокса.

С одной стороны, это позволяет дизайнеру выстраивать типографику как в полиграфическом дизайне — по базовой линии, что позволяет делать более эстетичные конструкции. С другой, обрезание текста по верхней площадке прописных букв — вопрос спорный.

Во-первых, в цифровой типографике далеко не всегда высота литеры — целое значение. Как и в какую сторону это будет округляться?

Во-вторых, при работе с дизайн-системами, где часто используют набор отступов и фиксированный шаг, такой подход эффективности не добавит, так как подогнать текстовый бокс под нужный размер не получится. Например, при шаге, кратном четырём пикселям, высота текстового блока может обрезаться до 13 или 15 пикселей. Что с этим делать, тоже пока неясно.

Александр Гладких, сооснователь веб-студии Charmer

Была довольно старая проблема несоответствия задаваемой строкой шрифта высоты контейнера строки и отступов в разных дизайнерских инструментах. Как это свойство подхватится Sketch и Figma — неизвестно. Поэтому оно может повлиять как на улучшение коммуникации дизайнера с разработкой, так и добавить путаницы.

На мой взгляд, в перспективе это свойство облегчит ряд интерфейсных продуктовых моментов. Это техническое свойство для технических задач. Стоит все же отметить, что машинно срезать отступы, заложенные шрифтовыми дизайнерами, бесцельно не стоит. Могут нарушиться заложенные геометрические принципы и пропорции, которые имели смысл.

Ну и, как всегда бывает со всеми нововведениями, стоит проверять доступность свойства из других браузеров и платформ. Скажем, одна и та же кнопка может быть унифицирована для веба и мобильных операционных систем. И вот это новое свойство может оказаться недоступным как в ближайших необновлённых версиях браузера, так и в принципе в инструментах разработки приложений.

Андрей Абрамов, дизайн-директор digital-консалтинговой компании Aic
0
7 комментариев
Написать комментарий...
Yury

В принципе это уже сейчас решаемо. Насколько удачно получится автоматизировать — не понятно потому что шрифты разные и если, все равно в каждом конкретном случае придется подгонять в ручную,  то удобства это не добавит. Потенциально это может работать только с Open Type шрифтами, где cap height передается как параметр в файле шрифта. С другими форматами, похоже работать не будет. 

Как делать сейчас, если кому интересно — отрицательные margins и это не костыль, отрицательные поля абсолютно валидный CSS.

Ответить
Развернуть ветку
Pixel Lens
отрицательные поля абсолютно валидный CSS.

Ждём отрицательные значения в настройках Auto Layout в Figma

Ответить
Развернуть ветку
Pixel Lens

Тем временем в InDesign это уже давно реализовано, и вообще современной индустрии интерфейсо-строении есть много чему поучиться у этой древней программы. Не удивительно, что в ней когда-то прототипировали сайты и приложения.

Ответить
Развернуть ветку
Арсений

Древняя — это quarkxpress 3.11. а индизайн современный и офигенный) но к сожалению для веба не подходит. Хоть типографика там и отличная

Ответить
Развернуть ветку
Yury
есть много чему поучиться

Здесь можно еще добавить применение разных стилей шрифта внутри одного текстового блока. Причем в вебе и нативной разработке это всегда было, но почему то в софте для дизайна интерфейсов этим решили пренебречь. 

Ответить
Развернуть ветку
Pixel Lens

Да, индизайн это воплощение стилей. Объекты, их различные параметры и шрифты - всё поддаётся стилям, вложенным и наследуемым, со множеством прекрасных настроек. Отдельный респект разным стилям букв и абзаца.

В фигме кстати можно сочетать несколько стилей шрифта внутри одного текстбокса. Но они остаются полностью независимыми к сожалению.

Ответить
Развернуть ветку
Konstantin K.

Надеюсь, что они про такой вариант не забудут.

Ответить
Развернуть ветку
4 комментария
Раскрывать всегда