{"id":9185,"title":"\u0427\u0435\u0440\u043d\u0438\u043b\u0430 \u0438\u0437 \u0432\u044b\u0445\u043b\u043e\u043f\u043d\u044b\u0445 \u0433\u0430\u0437\u043e\u0432: \u043c\u0438\u0444 \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c?","url":"\/redirect?component=advertising&id=9185&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-bizhuteriya-iz-chaynogo-griba&placeBit=1&hash=a88533bf78285d41072084482619c82803fd6598d1bcc2e142642ff721574ad7","isPaidAndBannersEnabled":false}

Для 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 комментариев
Популярные
По порядку
Написать комментарий...

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

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

7

отрицательные поля абсолютно валидный CSS.

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

6

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

3

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

5

есть много чему поучиться

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

1

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

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

1

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

3
Читать все 7 комментариев
«Вы говорите, а мы слушаем»: айдентика для онлайн-сервиса психологической помощи YouTalk

Привет, на связи команда Логомашины. Забота о ментальном здоровье — это важный тренд последних лет. В этой статье рассказываем, как мы разработали айдентику для YouTalk — сервиса, который уже три года помогает людям из более чем 50 стран справляться с психологическими проблемами.

А у вас сошелся «Дебет Кредит»?
Онлайн-санаторий для сотрудников: как помочь команде справиться с выгоранием

Чтобы поддержать команду, мы собрали эффективные инструменты для борьбы с эмоциональным выгоранием и объединили их в стенах виртуального санатория «Источник». Рассказываем, как пришли к созданию собственной экосистемы для поддержки сотрудников, и почему это действительно важно.

Дайджест новых стилей и сайтов digital-компаний за ноябрь от Embacy: Vevo, Winamp, Worldcoin и другие

Всем привет! Сегодня 1 декабря, а значит, что это дайджест новых стилей и сайтов digital-компаний, которые вышли в ноябре. Пишу его я, Вадим Орлов, основатель Embacy.

Илон Маск отправил сотрудникам письмо о риске банкротства SpaceX из-за медленного производства двигателей — CNBC Статьи редакции

Компании нужно ускориться, чтобы запускать ракеты минимум раз в две недели в 2022 году, написал Маск.

В «Чёрную пятницу» объем трафика Yota на сайты ритейлеров вырос более, чем на треть

По данным Yota, в «Чёрную пятницу» объем трафика и число переходов на сайты различных ритейлеров среди пользователей оператора выросли более чем на 30% по сравнению с 29 октября, последней пятницей прошлого месяца.

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

Как мы сделали проект про ВИЧ и почему это важно для развития бизнеса

С 2018 мы стали вновь выпускать спецпроекты на общественно-социальные темы: сделали проект о ДТП в России и неофициальную версию гибели подлодки «Курск». В этой статье я расскажу, как социальные проекты помогают агентству развиваться и что стоит учесть, когда вы решаетесь на этот шаг.

Корпоративный проект в Казахстане

Юридическая фирма «Надмитов, Иванов и Партнеры» успешно представляла интересы приобретателя по сделке приобретения 100% долей в уставном капитале общества, крупного производителя битумных материалов в Казахстане, регулируемой по российскому праву.

О прекрасном: графовая аналитика в 3D

Порой Data Scientist’ам приходится иметь дело с графами. Чаще всего это дело не такое уж и сложное, но бывают разногласия, которые начинаются при представлении результатов заказчику данного графа, ведь у каждого своё представлении о прекрасном. Особенно, когда дело касается расположения узлов.

IKEA начала сдавать в Токио квартиры в 10 м² за $0,86 в месяц, чтобы показать, что в них тоже можно жить Статьи редакции

Внутри есть мини-спальня, рабочая зона, диван, стиральная машина и другое.

null