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

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]

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

[scottmas]

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