I love the vertical trim option that just came out. But as of now it’s not supported by any browsers. So if you enable this feature the developer you hand off too will not be able to use vertical trimming, therefore your all the designs will be off due to the larger line heights that the vertical trim was subtracting.
So while this is a great idea, if you can’t actually use it on the web yet, you’re just making more work for yourself and your developer.
Am I missing something here?
When enabled it sets a certain line height, e.g. 12px font size results 9px line height which means you can set it with CSS
My understanding is that it doesn’t set or change the line height at all. It trims the top and bottom of the HTML element using a draft CSS property called ‘leading-trim’. But if you can’t use that setting, which is everyone at this point in time, then the developer will have to ask the designer to go in and turn off ‘vertical trimming’ and find out the proper spacing so that they can make it happen in browser.
I guess my point is that this feature is cool but useless because it only helps the designer by making padding / margins easier. But then when you hand it off the developer will have to reverse engineer all the spacing because they can’t use this draft CSS property yet.
Right??
Or they will measure the height of the text layer and use the same line height to get the same result. no guarantee that a dev guy is going to realize there is a special CSS prop to apply
But changing line height to make the vertical sizes the same isn’t the same result as trimming. If you lower the line height to compensate that makes the text closer together.
In trimming you’re removing whitespace only at the ends, but in adjusting line heights you’re removing whitespace for every line. So they’re not the same result.
I guess the reason I’m posting is because I’m trying to build out some stuff I’ve made in Figma using this feature. But after using it I’m realizing without the CSS draft being in any browser, it means I have to go back and turn off the feature on everything I used it on, and then figure out the correct padding to compensate and make it look like it should.
This is a huge pain if you weren’t expecting it, and it only makes the design stage easier but leaves the development with a ton of work they will very likely not notice. Which will end with all the fussed over UI spacing wrong in the final product.
Here is an image outlining the issue:
Hi! I found the article that descrives refactoring height light on ios, android, and CSS
CSS updated feature “leading trim” CSS Inline Layout Module Level 3
Wow, this is actually super helpful and even has some good solutions like selecting fonts that are properly centered, as well as finding and using the ratio of baseline to bounding box as a CSS mixin. Thank you so much!
This is also a great solution. I love that you can put in a grid size. Thank you!
Any luck implementing this proposed solution with your devs?
We have the same issue and it has caused severe frustration - we updated our designs with vertical trim (of course across 6 different brands 
), and as you mentioned we have to rework everything now.
Feel like this is a massive oversight by Figma, there should have been a big disclaimer attached to this.
Thank you for the validation! Yeah, pretty weird to launch a feature that really should not be used. I didn’t even try to use this after figuring all this out, I just totally avoided it.
The suggestions above were all good, and in the future I may try using the baseline / line-height ratio as a css calc rule, but until Leading-Trim goes prime time I think they should pull it.
Thanks for the info. I was wondering about this too, hopefully it gets perfected at the dev side in the near future. I’ll avoid it till then.
I went down the rabbit hole on this today, as a presentation layer savvy dev caught it. Lots of helpful stuff here in this thread, and I do wonder the point in implementing a feature that essentially makes a design so difficult to reproduce without draft properties.
Same issue. Designed a site using this feature, then wondered why it wasn’t working in code. Checked caniuse.com, which shows these properties are unsupported in everything but Safari Preview.
Figma isn’t faking this effect as an earlier poster suggested, if you switch to dev mode the unsupported CSS props are right there—
leading-trim: both;
text-edge: cap;
Agree that there should be a disclaimer/labs for experimental props. Love that Figma is getting ahead of the curve, but IMO only usable CSS should be generated by default.
