margin issues on android again

[CapsAdmin]

On android there is a problem with line height doing strange things under certain conditions. I believe those conditions come from

https://github.com/facebook/react-native/blob/main/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLineHeightSpan.java#L25

There are multiple stages, but for our purposes we only care about the first one or two. The other ones activate when our definition of "line gap" is below 0 so that's not important I guess. And some fonts are worse off than others.

It's probably possible to use the font metrics to check if the line height is below a certain threshold and then add some offsets.

Peek.2022-09-14.18-43.mp4

Example expo repo can be found here
https://github.com/CapsAdmin/react-native-leading-trim

I've been trying to implement leading trim for a while now by letting a designer define baseline and capheight offsets only for a font, but I'm starting to give up. I think you need to bring in actual metrics to work around this android issue.

I think ideally we should get the react native folks to give us more flexible text components that let us avoid doing hacks like this to get the leading trim.

[CapsAdmin]

One thing that I thought would help is to disable the includeExtraFontPadding prop on Text but it actually makes it worse. I guess it would make the java function not hit as many stages since the font metric gets an evenly distributed top and bottom height.

I also tried to apply reverse margins and padding when the conditions are met using the font metric from capsize but I don't think the metrics included there are accurate. I don't think roboto black has the exact same metrics as roboto thin for instance?

Maybe I'm tearing my hair out over this since this happens when line gap is usually low.

[phamfoo]

I saw your comment here facebook/react-native#29232 (comment). As you can see in the issue, line height is incorrect even without using capsize.

I think ideally we should get the react native folks to give us more flexible text components that let us avoid doing hacks like this to get the leading trim.

I don't think this is about "flexibility". This is simply a bug and it has to be fixed on the react native side. I'm not working on any react native projects atm, so I have very little motivation to investigate this further. There's not much I can do here unfortunately.

but I don't think the metrics included there are accurate

I'm pretty sure the font metrics are correct, I mean it works as expected on web and iOS right?

[phamfoo]

I'm deprecating this library soon. I was waiting for this PR seek-oss/capsize#50 to get merged, but at this point, I don't think people should use this until the issue on android gets resolved.

[phamfoo]

This package has been deprecated.