Skip to content

Tolerate sub-pixel height shortfall in adjustsFontSizeToFit on iOS #58930

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.

Sign up for GitHub

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

Open
nowex35 wants to merge 1 commit into
base: main
Choose a base branch
from
+46 −2
Open

Tolerate sub-pixel height shortfall in adjustsFontSizeToFit on iOS #58930

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions packages/react-native/Libraries/Text/Text/NSTextStorage+FontScaling.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@

#import "NSTextStorage+FontScaling.h"

#import <React/RCTUtils.h>

typedef NS_OPTIONS(NSInteger, RCTTextSizeComparisonOptions) {
RCTTextSizeComparisonSmaller = 1 << 0,
RCTTextSizeComparisonLarger = 1 << 1,
Expand Down Expand Up @@ -87,8 +89,10 @@ - (RCTTextSizeComparisonOptions)compareToSize:(CGSize)size thresholdRatio:(CGFlo

CGSize measuredSize = [layoutManager usedRectForTextContainer:textContainer].size;

// Does it fit the size?
BOOL fitsSize = size.width >= measuredSize.width && size.height >= measuredSize.height;
// Does it fit the size? Yoga's pixel-grid rounding can leave the height a float ULP short of
// the line height (#52642), so a shortfall smaller than one physical pixel still counts as fitting.
CGFloat heightTolerance = 1.0 / RCTScreenScale();
BOOL fitsSize = size.width >= measuredSize.width && size.height + heightTolerance > measuredSize.height;

CGSize thresholdSize = (CGSize){
size.width * thresholdRatio,
Expand Down
40 changes: 40 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,39 @@ class AdjustingFontSize extends React.Component<
}
}

function FontSizeToFitWithLineHeightRow({index}: {index: number}) {
const [height, setHeight] = React.useState<?number>(null);
return (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text
numberOfLines={1}
adjustsFontSizeToFit={true}
minimumFontScale={0.8}
onLayout={e => setHeight(e.nativeEvent.layout.height)}
style={{fontSize: 12, lineHeight: 20, width: 200}}>
{'Should not shrink ' + (index + 1)}
</Text>
<Text style={{fontSize: 9, color: '#888'}}>
{height == null ? '' : String(height)}
</Text>
</View>
);
}

// Rows after a 0.5pt separator: on a 3x screen some get a frame a float ULP short of lineHeight (#52642).
function FontSizeToFitWithLineHeightExample(): React.Node {
const rows = [];
for (let i = 0; i < 10; i++) {
rows.push(<FontSizeToFitWithLineHeightRow key={i} index={i} />);
}
return (
<View style={{alignItems: 'center'}}>
<View style={{height: 0.5, width: 200, backgroundColor: 'green'}} />
{rows}
</View>
);
}

class TextBaseLineLayoutExample extends React.Component<{}, unknown> {
render(): React.Node {
const texts = [];
Expand Down Expand Up @@ -1424,6 +1457,13 @@ const examples = [
return <AdjustingFontSize />;
},
},
{
title: 'Font Size Adjustment with lineHeight',
name: 'adjustsFontSizeToFitLineHeight',
render: function (): React.Node {
return <FontSizeToFitWithLineHeightExample />;
},
},
{
title: 'Text Align with RTL',
name: 'textAlign',
Expand Down
Loading