Skip to content

Commit 5d08aab

Browse files
Disable usesFontLeading for NSLayoutManager on iOS to fix baseline alignment issue on some fonts (#27195)
Summary: Fixes #27137 This PR fixes an issue on iOS where RCTTextView height is not calculated as it should for some fonts where font `leading` attributed is not equal to zero, which results in wrong baseline alignment behaviour. The fix for this is by setting `usesFontLeading` property of `NSLayoutManager` to `NO`, which results is a layout behavior that is similar to `UILabel` Probably the documentation for `usesFontLeading` describes why UILabel has a different (correct) layout behavior in that case > // By default, a layout manager will use leading as specified by the font. However, this is not appropriate for most UI text, for which a fixed leading is usually specified by UI layout guidelines. These methods allow the use of the font's leading to be turned off. ## Changelog [iOS] [Fixed] - Fix RCTTextView layout issue that happens on some font with `leading` attribute not equal to zero, which causes wrong base-alignment layout Pull Request resolved: #27195 Test Plan: Below are the test results before and after the change, and comparing that to native UILabel behavior. The test is done with using system font and custom font (`GothamNarrow-Medium`) and font size 50 [GothamNarrow-Medium.otf.zip](https://github.com/facebook/react-native/files/3832143/GothamNarrow-Medium.otf.zip) ```js const App: () => React$Node = () => { return ( <View style={{flex: 1, margin: 40, flexDirection: 'row', justifyContent: 'center', alignItems: 'baseline'}}> <View style={{width: 30, height: 30, backgroundColor: 'lightgray'}} /> <Text style={{fontSize: 50, backgroundColor: 'green', fontFamily: 'GothamNarrow-Medium'}}>{'Settings'}</Text> </View> ); }; ``` ------- ### Before the fix <img width="962" alt="Screenshot 2019-11-11 at 16 53 26" src="https://user-images.githubusercontent.com/5355138/68601049-dd778780-04a3-11ea-879e-cc7b4eb2af95.png"> ----- ### After the fix <img width="944" alt="Screenshot 2019-11-11 at 16 55 11" src="https://user-images.githubusercontent.com/5355138/68601180-1d3e6f00-04a4-11ea-87bc-61c6fa2cdb18.png"> ----- ### Using `UILabel` <img width="805" alt="Screenshot 2019-11-11 at 16 59 28" src="https://user-images.githubusercontent.com/5355138/68601487-b2d9fe80-04a4-11ea-9a0f-c025c7753c24.png"> Differential Revision: D19576556 Pulled By: shergin fbshipit-source-id: 4eaafdab963c3f53c461884c581e205e6426718a
1 parent 6237cfb commit 5d08aab

File tree

2 files changed

+2
-0
lines changed

2 files changed

+2
-0
lines changed

Libraries/Text/Text/RCTTextShadowView.m

+1
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,7 @@ - (NSTextStorage *)textStorageAndLayoutManagerThatFitsSize:(CGSize)size
233233
textContainer.maximumNumberOfLines = _maximumNumberOfLines;
234234

235235
NSLayoutManager *layoutManager = [NSLayoutManager new];
236+
layoutManager.usesFontLeading = NO;
236237
[layoutManager addTextContainer:textContainer];
237238

238239
NSTextStorage *textStorage =

ReactCommon/fabric/textlayoutmanager/platform/ios/RCTTextLayoutManager.mm

+1
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ - (void)drawAttributedString:(AttributedString)attributedString
9797
textContainer.maximumNumberOfLines = paragraphAttributes.maximumNumberOfLines;
9898

9999
NSLayoutManager *layoutManager = [NSLayoutManager new];
100+
layoutManager.usesFontLeading = NO;
100101
[layoutManager addTextContainer:textContainer];
101102

102103
NSTextStorage *textStorage =

0 commit comments

Comments
 (0)