Вчера Figma провела митап и показала 32 небольших изменения в своем инструменте. Клёво и здорово, о всех рассказывать не буду, можно все увидеть тут.
Но вот пытливый ум моих подписчиков (спасибо Лев!), решил докопаться до истины и задать вопросы по одному из улучшений, и был прав! Сейчас я вам всё расскажу.
Речь пойдёт о leading trim, такое свойство, которое помогает обрезать рамку текста от верхнего края буквы до нижнего.
Использование этого свойства в дизайн-макетах скажется благоприятно на ваших дизайнах, потому что иногда нужно ковыряться с высотой строки, чтобы подстроить нужный результат.
Разработчики также порой страдают от приставучих дизайнеров, что макет в вёрстке не пиксель пёрфект, кнопки разной высоты, а между текстовыми блоками пропасть. Всему виной line-height.
Между частями текста появляется лишнее пространство, когда расстояние между ними измеряется по границам текстовых блоков, а не по границам букв внутри. Такая проблема тянется аж с 1996 года, когда появился CSS1.
Проблема известна и ее даже пытаются решить с 2020 года, введя новые свойства leading-trim и text-edge. Figma так же использует эти свойства и отображает их, если посмотреть в инспектор.
Но вот засада, эти свойства еще лежат в черновиках у разработчиков CSS и не поддерживаются ни одним браузером. Срок выпуска этого свойства — под вопросом.
Но даже, если разработчики CSS выпустят поддержку браузерами сегодня, то еще минимум год стоит подумать над использованием, т.к. большинство пользователей не сможет/не захочет обновить свои браузеры, а значит, разработка будет тщетной.
Прикладываю скриншоты и пруфы (за шакальные скрины извините), что в последней версии Chrome свойства точно не работают.
Если вы ничерта не поняли о чем я вам тут, то подчеркну главную мысль: если вы делаете для веба и у вас чешутся руки обнять ваши буковки плотным контейнером, то почешитесь еще, радоваться рано. Для макетов, которые не пойдут в разработку обновление годится.
