Text-box-trim/edge inconsistency with browser

Ask the community
1

Hi :),

As text-box-trim/text-box-edge is now available in Safari TP and in development in Chrome, we are trying to evaluate this as a progressive enhancement.

Unfortunately, we are experiencing a completely different result with what Figma and a compatible browser renders, considering the same input and settings.

We could see that by default Figma uses both for text-box-trim, and cap for text-box-edge, but the end result is radically different:

comparison
comparison1000×400 22.2 KB

I am unsure if the issue is coming from the browser or Figma, but after opening an issue on Webkit, I was told that it might be Figma not respecting the spec: 261137 – text-box-trim leading radically different results from Figma

I am not familiar enough with all the details of the spec so I can’t really say who’s correct or not, but with such a completely different result, this option is not really usable as of today :).

Thanks!

2

Seems like it’s too early to adopt this feature due to poor browser support

1 Like
3

I agree it’s probably too early to use that extensively, but in our use case we are creating themes where the merchant is using his own font. We often have the issue on small, localized elements like buttons or badges where, based on the font, the alignment seems off.

Using that as a progressive enhancement for a few very specific elements is what we are currently considering. In all cases, as it is coming to Safari 17 unprefixed, it will definitely start to have some adoption, so ensuring it is consistent with Figma rendering seems important ;).