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

iOS: Fix font weight resolution #15162

Closed
wants to merge 1 commit into from
Closed

iOS: Fix font weight resolution #15162

wants to merge 1 commit into from

Conversation

kipricker
Copy link

Issue:
Some fonts are defined with weights that don't match with the UIFontWeight constants.

Example:
UIFontWeightTraits for Roboto font
Light: -0.230
Thin: -0.365

Currently, the UIFontWeightTrait is always used if it != 0.0, and given the UIFontWeight constants for Light and Thin:
UIFontWeightThin -0.6
UIFontWeightLight -0.4

A style font weight of "300" or "200" will both resolve to Roboto-Thin as its weight -0.365 is closer to -0.4 (UIFontWeightLight) and -0.6 (UIFontWeightThin) than -0.230 (Roboto-Light).

Proposed fix:
When resolving getWeightOfFont try to match the name of weight to the name of the font first, and guess the font with UIFontWeightTrait as the fall back.

Test Plan:
Attempt to display Roboto at weights "200" and "300" and Roboto-Thin and Roboto-Light should be displayed correctly.

Current:
simulator screen shot jul 7 2017 11 44 42 am

Fixed:
simulator screen shot jul 7 2017 11 42 25 am

**Issue:**
Some fonts are defined with weights that don't match with the UIFontWeight constants.

**Example:**
UIFontWeightTraits for Roboto font
Light: -0.230
Thin: -0.365

Currently, the UIFontWeightTrait is always used if it != 0.0, and given the UIFontWeight constants for Light and Thin:
UIFontWeightThin -0.6
UIFontWeightLight -0.4

A style font weight of "300" or "200" will both resolve to Roboto-Thin as its weight -0.365 is closer to -0.4 (UIFontWeightLight) and -0.6 (UIFontWeightThin) than -0.230 (Roboto-Light).

**Proposed fix:**
When resolving `getWeightOfFont` try to match the name of weight to the name of the font first, and guess the font with UIFontWeightTrait as the fall back.

**Test Plan:**
Attempt to display Roboto at weights "200" and "300" and Roboto-Thin and Roboto-Light should be displayed correctly.
@facebook-github-bot
Copy link
Contributor

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

@facebook-github-bot facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jul 24, 2017
@facebook-github-bot
Copy link
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@facebook-github-bot facebook-github-bot added GH Review: accepted Import Started This pull request has been imported. This does not imply the PR has been approved. and removed GH Review: review-needed labels Jul 24, 2017
@facebook-github-bot
Copy link
Contributor

@javache has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@nihgwu
Copy link
Contributor

nihgwu commented Aug 2, 2017

@javache @grabbou that's a breaking change for my app, I think we should add it to the breaking changes section for the release note

@grabbou
Copy link
Contributor

grabbou commented Aug 2, 2017

Makes sense - I've been struggling with this issue for a while. Glad to see it's fixed!

@nihgwu
Copy link
Contributor

nihgwu commented Aug 2, 2017

Seems there is a regression with PingFangSC, I will paste the diff later

@nihgwu
Copy link
Contributor

nihgwu commented Aug 2, 2017

After:
simulator screen shot 3 aug 2017 00 58 19
Before:
simulator screen shot 3 aug 2017 00 58 50
Native:
image

It's obviously that the PingFangSC-Light is incorrect after this commit
ping @kipricker

@kipricker
Copy link
Author

@nihgwu good catch. Thats actually an issue with the original name suffix check. It looks like it's finding ultralight before light.

I'll add a check for a weight prefix, ultrabold and semibold would be affected the same. Actually, the suffix check wont work with italic fonts either. Even with this fix, font selection is still guess work, which I don't like. I'll investigate.

@nihgwu
Copy link
Contributor

nihgwu commented Aug 3, 2017

@kipricker good to know, I know nothing about Objective-C, if you come with the patch, can we also cherry-pick to 0.48-stable branch @grabbou

@grabbou
Copy link
Contributor

grabbou commented Aug 3, 2017 via email

@nihgwu
Copy link
Contributor

nihgwu commented Sep 4, 2017

@kipricker any progress on this?

nihgwu pushed a commit to nihgwu/react-native that referenced this pull request Sep 6, 2017
facebook-github-bot pushed a commit that referenced this pull request Sep 7, 2017
Summary:
fix the regression I mentioned in #15162 (comment)

as no one is working on this, I take the step, although I know nothing about Objective C

I find the key point is that the keys in `NSDictionary` are not ordered as presented, it's a hash table, so no grantee on keys order, so I create a new array to do that, then it will check `ultralight` before `light` and `semibold` before `bold`
Closes #15825

Differential Revision: D5782142

Pulled By: shergin

fbshipit-source-id: 5346b0cb263e535c0b445e7a2912c452573248a5
@kipricker
Copy link
Author

@nihgwu I've been super busy and haven't had a lot of time. I am still investigating how to accurately detect font weights beyond just string comparison. I'm going to make the time to have a fix for this by next week.

ide pushed a commit that referenced this pull request Sep 7, 2017
Summary:
fix the regression I mentioned in #15162 (comment)

as no one is working on this, I take the step, although I know nothing about Objective C

I find the key point is that the keys in `NSDictionary` are not ordered as presented, it's a hash table, so no grantee on keys order, so I create a new array to do that, then it will check `ultralight` before `light` and `semibold` before `bold`
Closes #15825

Differential Revision: D5782142

Pulled By: shergin

fbshipit-source-id: 5346b0cb263e535c0b445e7a2912c452573248a5
ide pushed a commit that referenced this pull request Sep 7, 2017
Summary:
fix the regression I mentioned in #15162 (comment)

as no one is working on this, I take the step, although I know nothing about Objective C

I find the key point is that the keys in `NSDictionary` are not ordered as presented, it's a hash table, so no grantee on keys order, so I create a new array to do that, then it will check `ultralight` before `light` and `semibold` before `bold`
Closes #15825

Differential Revision: D5782142

Pulled By: shergin

fbshipit-source-id: 5346b0cb263e535c0b445e7a2912c452573248a5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Import Started This pull request has been imported. This does not imply the PR has been approved.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants