Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
chromakode opened this issue Mar 24, 2017 · 6 comments
Labels
Help Wanted :octocat: Issues ideal for external contributors. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@chromakode
Copy link

chromakode commented Mar 24, 2017

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:

screen shot 2017-03-23 at 2 57 03 pm

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:

image

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
Copy link
Contributor

hramos commented May 25, 2017

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.

@hramos hramos closed this as completed May 25, 2017
@chromakode
Copy link
Author

@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
Copy link
Contributor

hramos commented May 25, 2017

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

@hramos hramos reopened this May 25, 2017
@sujit13666
Copy link

Having same problem here.

@hramos hramos added the Help Wanted :octocat: Issues ideal for external contributors. label Jul 28, 2017
@stale
Copy link

stale bot commented Oct 13, 2017

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Oct 13, 2017
@stale stale bot closed this as completed Oct 20, 2017
@scottmas
Copy link

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

@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Help Wanted :octocat: Issues ideal for external contributors. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

4 participants