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!
