fix: Improve text line height calculation to properly align text on iOS#46884
fix: Improve text line height calculation to properly align text on iOS#46884ArekChr wants to merge 61 commits into
Conversation
|
Hi @ArekChr! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign 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 to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
ArekChr
changed the title
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
facebook-github-bot
added
CLA Signed
| contentFrame:(CGRect)contentFrame { | ||
| UIFont *font = [textStorage attribute:NSFontAttributeName atIndex:0 effectiveRange:NULL]; | ||
| if (!font) { | ||
| font = [UIFont systemFontOfSize:14]; |
There was a problem hiding this comment.
[Q] Maybe we can use systemFontSize here?
https://developer.apple.com/documentation/uikit/uifont/1623395-systemfontsize?language=objc
There was a problem hiding this comment.
I couldn’t find systemFontSize used anywhere else in the repo, and the default font size of 14 has been hardcoded. Also, since systemFontSize is not available on tvOS, I’m not sure if it would be a suitable replacement. Let me know your thoughts on whether we should stick with the hardcoded value for consistency or if there’s a preferred approach.
There was a problem hiding this comment.
This seems sketch. E.g. what if there is a font multiplier applied?
| CGFloat verticalOffset = 0; | ||
| if (textHeight > lineHeight) { | ||
| CGFloat difference = textHeight - lineHeight; | ||
| verticalOffset = difference / 2.0; | ||
| } else if (textHeight < lineHeight) { | ||
| CGFloat difference = lineHeight - textHeight; | ||
| verticalOffset = -(difference / 2.0); | ||
| } |
There was a problem hiding this comment.
I think comment explaining the calculations might be useful
|
nice! |
ArekChr
force-pushed
the
improve-lineheight-calc-ios
branch
from
246c550 to
f998a9a
Compare
cipolleschi
left a comment
cipolleschi
left a comment
There was a problem hiding this comment.
Changes looks good. We discussed this internally and we can proceed importing it.
To set the expectation, this might take some time to merge, given that this might affect internal tests and product code and we would need some time to fix them. But thankfully, we have a feature flag to control the rollout! 😄
|
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
@ArekChr CI is currently red. The error is Could you please verify why this is happening and fix it? and then build from Xcode. If you need to run the old architecture, you can disable it by adding: - (BOOL) newArchEnabled
{
return NO;
}in the AppDelegate.mm file |
|
Hi @cipolleschi, the issue has been fixed, and the build runs successfully locally. Thanks! |
|
We were discussing internally that it would be better to have two separate feature flags, one for Android and one for iOS. Could I ask you to:
The idea is to be able to control the two platforms separatedly. Thank you so much for your help and patience |
|
@cipolleschi I have an issue where the ReactNativeFeatureFlags.h header is not found when using dynamic frameworks. I’ve tried a few things but haven’t resolved the issue. Do you have any suggestions on how to fix or work around this? |
ArekChr
force-pushed
the
improve-lineheight-calc-ios
branch
from
fa44b24 to
9e5ed70
Compare
|
Hi, @cipolleschi. The CI failed due to some issues unrelated to my changes. I’ve likely fixed the problem with dynamic frameworks, but two workflows seem missing. Could you please trigger those workflows again so we can proceed? |
|
@ArekChr I opened a ticket internally to find a better person to handle this, as it is out of my area of expertise. Even if we land the change as it is, behind feature flags so with no effect on the current behavior, we still need a Meta engineer that can run experiment and, eventually, enable the feature flag for everyone. These feature flags are not something that our final users are supposed to change: so even by landing this, user would not probably benefit from it until we enable it for everyone. I'll keep poking at people, asking to prioritize this work, but it might take a bit. :( |
ArekChr
force-pushed
the
improve-lineheight-calc-ios
branch
2 times, most recently
from
219dc0d to
ffaa3ae
Compare
ArekChr
force-pushed
the
improve-lineheight-calc-ios
branch
from
babd31d to
a17189e
Compare
Co-authored-by: troZee <12766071+troZee@users.noreply.github.com>
|
|
@cipolleschi any chance we can push this forward? It’s a patch we need to apply in a few projects |
- Rename calculateCenteredFrameWithAttributedText to adjustFrameForLineHeightCentering - Change method to accept CGRect pointer instead of passing by value - Properly modify frame using pointer dereferencing (frame->origin.y)
Changed from ceil/floor to round with remainder calculation to prevent 1-pixel vertical shifts and ensure cross-platform parity.
|
Rebased with code style improvements. This PR fixes the long-standing iOS/Android line height centering discrepancy. Screenshots showing platform parity attached.
|
@matt-oakes as per the PR title this fix is for iOS only |
|
Any updates on this? Would be great if this got merged! Here is a react-native+0.83.1.patch file if anyone needs it that directly applies these changes without the feature flag. The only concern I have with this is that this new centering could lead to similar issues of text being cut off with lineHeight being the same as the font size. Since that is something I have encountered on android. Is there a way to allow the characters drawing to overflow? This would solve some potential issues for both android and iOS imo. |
@cipolleschi can you ask for eyes on that ticket. If there's feedback in the next few weeks we will find some bandwidth to address it. |
16 participants
Summary:
This pull request addresses an issue in React Native on iOS: Text gets truncated when the line height is too small, even if the line-height matches or exceeds the font size.
The existing logic did not correctly handle font metrics (ascent, descent, top, bottom) when the total height exceeded the line height. The implementation now ensures a more balanced vertical space distribution, reducing text clipping and misalignment.
The fix mirrors a similar solution made on Android, ensuring consistency across both platforms.
For more context, see the related issue: React Native issue #29507.
Changelog:
[IOS] [FIXED] - Fixed an issue where text clipping and misalignment occurred when the line-height was smaller than the total ascent and descent of the font.
Test Plan:
The result is an improvement over the current implementation, reducing the occurrence of text truncation. While minimal truncation still exists at single-line heights, particularly with special characters, the implementation better preserves the vertical alignment of the text compared to previous behavior. However, like the Android implementation, this does not fully resolve the issue of React Native truncating content that is out of bounds of the span.