fix: Text cut off issues when adjusting text size and font weight in system settings #39581
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
Base commit: 8c5340f |
|
@ryancat has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
It would be helpful if we could have a test in RNTester for this. Does this only reproduce in Xiaomi devices? |
Yes, only Xiaomi devices with MIUI13 and MIUI14 devices are reported from users in product environment until now. As for the test, there is a snack demo in this pr's summary, demo |
Some test cases are added in a seperate pr: #39594 |
...ges/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
Outdated
Show resolved
Hide resolved
...ges/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
Show resolved
Hide resolved
jcdhlzq
force-pushed
the
fix/text-cutoff-when-scaling
branch
from
1de79ab
to
1af2486
Compare
|
@ryancat One error happened on CircleCI, but I can not rerun it. |
The key change is to set text size by calling |
NickGerleman
approved these changes
Sep 25, 2023
|
@ryancat has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
ShevO27
pushed a commit
to ShevO27/react-native
that referenced
this pull request
Sep 26, 2023
…system settings (facebook#39581) Summary: Fix Text cut off issues when adjusting text size and font weight in system settings. This pr fixed the problem that can be reproduced with the [snack](https://snack.expo.dev/fl5DSrLBJ) on Xiaomi devices with MIUI13 and MIUI14. The problem is shown as the image below: the number "999" is cut off and only "99" is rendered. <img src="https://github.com/facebook/react-native/assets/23273745/64269ced-4060-4ab5-8233-8199e4f2acbd" width="20%" height="20%" alt="text-cutoff-when-scaling-miui14" /> The problem is produced with setting font scaling in system settings like the image below shows. <img src="https://github.com/facebook/react-native/assets/23273745/c31d1bf2-d038-4536-b1a4-509050f2aa7c" width="20%" height="20%" alt="settings" /> This text cut off case can be avoided by setting [`allowFontScaling`](https://reactnative.cn/docs/text#allowfontscaling) to false. But this pr can make it no matter what value `allowFontScaling` is set. The root cause of this case, according to MIUI developers, is that Misans typeface, as a variable font which will adjust the weight of different font axes with different font size, gets different widths when Text is measured and drawn for a bug in the framework of MIUI rom. They will fix this bug in next version while this pr fixed it in old versions. ## Changelog: [ANDROID][FIXED]-Fix Text cut off issues when adjusting text size and font weight in system settings. <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: [ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: facebook#39581 Test Plan: The effect after fixed is shown in the image below. <img src="https://github.com/facebook/react-native/assets/23273745/1f93f47f-5cdf-4ee1-934a-6cb3b04309ea" width="20%" height="20%" alt="fixed" /> Reviewed By: NickGerleman Differential Revision: D49509633 Pulled By: ryancat fbshipit-source-id: fd93f14bdbced8026a45dc9e0299465962433de5
|
This pull request has been reverted by 36057da. |
|
It ended up causing a few hundred test failures due to NPEs. I will see if I can dig up the stack trace soon. |
|
ok, I fixed this npe in latest jcdhlzq:fix/text-cutoff-when-scaling. |
|
It seems that this pr cannot be reopened, so I make a new one #39711 @NickGerleman @ryancat |
Hi, @ryancat The NPE is caused by overriding And all checks have passed in #39711. Shall we proceed with it? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix Text cut off issues when adjusting text size and font weight in system settings.
Summary:
This pr fixed the problem that can be reproduced with the snack on Xiaomi devices with MIUI13 and MIUI14. The problem is shown as the image below: the number "999" is cut off and only "99" is rendered.
The problem is produced with setting font scaling in system settings like the image below shows.
This text cut off case can be avoided by setting
allowFontScalingto false. But this pr can make it no matter what valueallowFontScalingis set.The root cause of this case, according to MIUI developers, is that Misans typeface, as a variable font which will adjust the weight of different font axes with different font size, gets different widths when Text is measured and drawn for a bug in the framework of MIUI rom. They will fix this bug in next version while this pr fixed it in old versions.
Changelog:
[ANDROID][FIXED]-Fix Text cut off issues when adjusting text size and font weight in system settings.
Test Plan:
The effect after fixed is shown in the image below.