React-native: Android line-height clipping off center + affected by font ascent/descent values

[chromakode]

Description

The line spacing and alignment of <Text> components on Android appears to be incorrectly affected by the ascent/descent metrics of the font metadata. Here is a comparison of OpenSans being rendered on both iOS and Android:

The stock "OpenSans" font has cut off descenders with lineheight=30, while on iOS it is centered. The cyan "OpenSans*" font is modified (using FontForge) to have reduced ascent/descent vertical metrics:

This causes the lines to be closer together than the specified lineheight (which differs from the correct rendering on iOS).

Reproduction Steps and Sample Code

See https://github.com/chromakode/react-native-lineheight-demo for the demo app and fonts pictured above.

Solution

I suspect that logic in CustomLineHeightSpan.java is the cause of this bug. I haven't had a chance to dig deeper yet, but it looks like the off-center rendering is caused when fm.bottom = fm.descent = 0 in the first branch. The way that these metrics are clipped should probably be changed to bring the behavior more in line with iOS.

Additional Information

• React Native version: 0.42.3
• Platform: Android
• Development Operating System: macOS
• Dev tools: iOS 10.2; Android SDK Tools 25.3.1

[hramos]

We're cutting down on the number of outstanding issues, in order to allow us to focus. I'm closing this issue because it has been open for over 60 days with no activity. If you think it should still be opened let us know why.

[chromakode]

@hramos This bug causes inaccurate line height rendering of all <Text> on Android. I've traced the bug to the specific part of code that needs attention, which hasn't been touched since Sep 12, 2016, but haven't had time to work on it yet. This is a subtle bug that potentially affects a large number of apps. Please reopen this issue and keep tracking it until someone can take a pass on CustomLineHeightSpan.java.

[hramos]

Re-opening. It would be great to see a PR that addresses this.

[sujit13666]

Having same problem here.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[scottmas]

Would be great to see progress on this. It's still an outstanding issue.