Sub-pixel rounding affects vertical alignment in Chrome

[jimmeyer-els]

Thanks for building capsize.

We're currently trying it out, and like the utility, but have run into a problem in Chrome.

Based on the font metrics, the heights of the text come out to sub-pixel dimensions since the ::before and ::after look like the following example with Vanilla Extract:

-textSize-large-tablet-capsizeTrims-capHeightTrim__u8my2f3y: -0.3495em;

Now since the calculation is based on font metrics, there's no guarantee that this produces whole pixels of trim above and below. If you then place a varied number of component into the page, vertical text alignment is now affected by how many sub-pixel elements have come before it. This problem is demonstrated in the following video where I change a Heading that's 15.27px via capsize to 16px, with the result that components below round vertical text alignment differently.

Chrome.pixel.rounding.mp4

Any ides on how to address this? Maybe the em values for the trim should be rounded in relationship to the cap-height of the font so that the combination of the three produce a text bounding box that's whole pixels high?