Для CSS создают параметр leading-trim: он исправит видимый беспорядок между строками текста при равных отступах в коде
Из-за особенностей кода между блоками текста появляется лишнее пространство. Новый параметр должен справиться с загвоздкой.
В начале июня 2020 года разработчики CSS предложили новый пакет спецификаций, где упоминается параметр leading-trim. Он позволит обрезать поля вокруг текста по заданным параметрам. Когда разработчики его добавят, неизвестно.
Дизайнер Microsoft Итан Ванг считает: это свойство решит проблему веб-дизайна последних 24 лет, когда настроить междустрочный интервал было крайне сложно.
В чём заключалась проблема
Между частями текста появляется лишнее пространство, когда расстояние между ними измеряется по границам текстовых блоков, а не по границам букв внутри. На иллюстрации ниже блоки распределены равномерно — между ними 32 пикселя. Но на деле разрывы больше и не сочетаются друг с другом.
Такая проблема появилась во время создания CSS1 в 1996 году. Программисты разделили интерлиньяж (междустрочный интервал) пополам: половина над текстом, половина под. Они назвали это свойство half-leading.
У каждого размера шрифта внутри семейства есть высота строки по умолчанию. Она должна быть больше, чем текст в ней, чтобы размещать определённые символы и акцентирующие знаки. С увеличением высоты строки добавляются два half-leading, и текстовое поле становится ещё больше.
«Этот половинчатый интервал вместе с дополнительным пространством для высоты строки — корень сегодняшних разочарований в текстовых полях», — пишет Ванг.
Что делает leading-trim
С помощью этого параметра можно обрезать пустое пространство вокруг текстового блока по значениям, нужным пользователю.
Например, в коде можно использовать ещё один новый CSS-параметр — text-edge. Он указывает браузеру, что края текста — высота верхнего края букв и базовая буквенная линия. По этому параметру идущий следом leading-trim обрежет пустые поля.
Что об этом думают российские дизайнеры
Новый параметр на первый взгляд решает проблему пустого пространства внутри текстового бокса.
С одной стороны, это позволяет дизайнеру выстраивать типографику как в полиграфическом дизайне — по базовой линии, что позволяет делать более эстетичные конструкции. С другой, обрезание текста по верхней площадке прописных букв — вопрос спорный.
Во-первых, в цифровой типографике далеко не всегда высота литеры — целое значение. Как и в какую сторону это будет округляться?
Во-вторых, при работе с дизайн-системами, где часто используют набор отступов и фиксированный шаг, такой подход эффективности не добавит, так как подогнать текстовый бокс под нужный размер не получится. Например, при шаге, кратном четырём пикселям, высота текстового блока может обрезаться до 13 или 15 пикселей. Что с этим делать, тоже пока неясно.
Была довольно старая проблема несоответствия задаваемой строкой шрифта высоты контейнера строки и отступов в разных дизайнерских инструментах. Как это свойство подхватится Sketch и Figma — неизвестно. Поэтому оно может повлиять как на улучшение коммуникации дизайнера с разработкой, так и добавить путаницы.
На мой взгляд, в перспективе это свойство облегчит ряд интерфейсных продуктовых моментов. Это техническое свойство для технических задач. Стоит все же отметить, что машинно срезать отступы, заложенные шрифтовыми дизайнерами, бесцельно не стоит. Могут нарушиться заложенные геометрические принципы и пропорции, которые имели смысл.
Ну и, как всегда бывает со всеми нововведениями, стоит проверять доступность свойства из других браузеров и платформ. Скажем, одна и та же кнопка может быть унифицирована для веба и мобильных операционных систем. И вот это новое свойство может оказаться недоступным как в ближайших необновлённых версиях браузера, так и в принципе в инструментах разработки приложений.
В принципе это уже сейчас решаемо. Насколько удачно получится автоматизировать — не понятно потому что шрифты разные и если, все равно в каждом конкретном случае придется подгонять в ручную, то удобства это не добавит. Потенциально это может работать только с Open Type шрифтами, где cap height передается как параметр в файле шрифта. С другими форматами, похоже работать не будет.
Как делать сейчас, если кому интересно — отрицательные margins и это не костыль, отрицательные поля абсолютно валидный CSS.
отрицательные поля абсолютно валидный CSS.Ждём отрицательные значения в настройках Auto Layout в Figma
Тем временем в InDesign это уже давно реализовано, и вообще современной индустрии интерфейсо-строении есть много чему поучиться у этой древней программы. Не удивительно, что в ней когда-то прототипировали сайты и приложения.
Древняя — это quarkxpress 3.11. а индизайн современный и офигенный) но к сожалению для веба не подходит. Хоть типографика там и отличная
есть много чему поучитьсяЗдесь можно еще добавить применение разных стилей шрифта внутри одного текстового блока. Причем в вебе и нативной разработке это всегда было, но почему то в софте для дизайна интерфейсов этим решили пренебречь.
Надеюсь, что они про такой вариант не забудут.