Skip to content

TextLayout: take full width if text wrapped #47435

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

Closed
s77rt wants to merge 3 commits into from
Closed

TextLayout: take full width if text wrapped #47435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f9d2c8
TextLayout: take full width if text wrapped beyond numberOfLines
s77rt Nov 5, 2024
7fbdf03
linter
s77rt Nov 6, 2024
4e30c8b
use full width if text wraps
s77rt Nov 8, 2024
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
4 changes: 4 additions & 0 deletions ...ct-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,6 +661,10 @@ public static long measureText(
for (int lineIndex = 0; lineIndex < calculatedLineCount; lineIndex++) {
boolean endsWithNewLine =
text.length() > 0 && text.charAt(layout.getLineEnd(lineIndex) - 1) == '\n';
if (!endsWithNewLine && lineIndex + 1 < layout.getLineCount()) {
calculatedWidth = width;
break;
}
Comment on lines +664 to +667
Copy link
Contributor

@NickGerleman NickGerleman Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we may also reach this path when widthYogaMeasureMode is YogaMeasureMode.UNDEFINED, in which case we are asking for max-content size, and the width is NaN.

Copy link
Contributor

@NickGerleman NickGerleman Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think on L604, we could replace:

if (widthYogaMeasureMode == YogaMeasureMode.AT_MOST && calculatedWidth > width)

with

if (widthYogaMeasureMode == YogaMeasureMode.AT_MOST && (calculatedWidth > width || layout.getLineCount() > 1))

Copy link
Contributor Author

@s77rt s77rt Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we may also reach this path when widthYogaMeasureMode is YogaMeasureMode.UNDEFINED

In this case, should we keep the calculated width as the max width of the lines?

I think on L604, we could replace

We set calculatedWidth = width only if the text wraps due to overflow. If the user write 2 short lines we still use the width of the maximum line

float lineWidth =
endsWithNewLine ? layout.getLineMax(lineIndex) : layout.getLineWidth(lineIndex);
if (lineWidth > calculatedWidth) {
Expand Down
25 changes: 25 additions & 0 deletions ...r/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,8 +347,33 @@ - (TextMeasurement)_measureTextStorage:(NSTextStorage *)textStorage
NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
[layoutManager ensureLayoutForTextContainer:textContainer];

NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
__block BOOL textDidWrap = NO;
[layoutManager
enumerateLineFragmentsForGlyphRange:glyphRange
usingBlock:^(
CGRect overallRect,
CGRect usedRect,
NSTextContainer *_Nonnull usedTextContainer,
NSRange lineGlyphRange,
BOOL *_Nonnull stop) {
NSRange range = [layoutManager characterRangeForGlyphRange:lineGlyphRange
actualGlyphRange:nil];
NSUInteger lastCharacterIndex = range.location + range.length - 1;
BOOL endsWithNewLine =
[textStorage.string characterAtIndex:lastCharacterIndex] == '\n';
if (!endsWithNewLine && textStorage.string.length > lastCharacterIndex + 1) {
Copy link
Contributor

@NickGerleman NickGerleman Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this correctly detect wrapping for something like the below?

Hello\n
World\n

I think we may be able to just count lines. https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/TextLayout/Tasks/CountLines.html#//apple_ref/doc/uid/20001810-CJBGBIBB

Copy link
Contributor Author

@s77rt s77rt Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, that's not considered text wrap. In this case we want the current behaviour (text width) otherwise we'd break case 2 from #47435 (comment)

textDidWrap = YES;
*stop = YES;
}
}];

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

if (textDidWrap) {
size.width = textContainer.size.width;
Copy link
Contributor

@NickGerleman NickGerleman Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we may have similar case to the above, for measuring max-content, where we don't want to set to size. I think in this case, it looks like that might be represented as Infinity layout constraint which makes its way to the NSTextContainer.

}

size = (CGSize){RCTCeilPixelValue(size.width), RCTCeilPixelValue(size.height)};

__block auto attachments = TextMeasurement::Attachments{};
Expand Down