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