Bug 292563 – text-wrap balance doesn't work correctly with non-zero word-spacing

• Component: Text
• Status: RESOLVED FIXED

[Sage Fennel]

Created attachment 475142 [details]
Minimal reproduction HTML file, open in Safari and compare with results in Firefox or Chrome

The use of word-spacing (other than the value 0) causes text-wrap: balance to line wrap every word.

The attached HTML file should render as:

    "Line Wrap"

But in Safari it renders as:

    "Line
    Wrap"

---

Version 18.4 (20621.1.15.11.10)
macOS 15.4.1 (24E263)

[Sage Fennel]

FYI, apparently this bug doesn't happen with text-wrap: pretty; in Safari TP.

[Karl Dubost]

@sage thanks for the report. Does it happen on a live website too?

If I set a longer line

data:text/html,<h1%20style="text-wrap:balance;%20word-spacing:1px;">Line%20Wrap%20for%20every%20words</h1>
The last word is being sent to the next line.

[Radar WebKit Bug Importer]

<rdar://problem/150893603>

[Karl Dubost]

The difference in between pretty and balance. 

https://searchfox.org/wubkat/rev/dd5fe1011df7e3438ac4889356abcab7681df46d/Source/WebCore/layout/formattingContexts/inline/InlineContentConstrainer.cpp#322-332
```cpp
if (wrapStyle == TextWrapStyle::Balance) {
    const InlineLayoutUnit idealLineWidth = totalWidth / chunkSize;
    if (m_numberOfLinesInOriginalLayout <= maximumLinesToBalanceWithLineRequirement)
        return balanceRangeWithLineRequirement(rangeToConstrain, idealLineWidth, chunkSize, isFirstChunk);
    return balanceRangeWithNoLineRequirement(rangeToConstrain, idealLineWidth, isFirstChunk);
}

if (wrapStyle == TextWrapStyle::Pretty) {
    const InlineLayoutUnit idealLineWidth = m_maximumLineWidthConstraint  - textWrapPrettyStretchability * textWrapPrettyMaxStretch;
    return prettifyRange(rangeToConstrain, idealLineWidth, isFirstChunk);
}
```

[Karl Dubost]

Maybe word-spacing makes the line width bigger but it is not taken into account in the computation for textwrap ?

[Sage Fennel]

@Karl Happy to report it. I disabled the offending rule (word-spacing) on main site, but I spun up a preview deployment with it re-enabled, so you can see the bug in context. I have word-spacing added to h1,h2 on my site.

https://deploy-preview-134--wavebeem-com.netlify.app/

Source code here if you'd like to see anything else:

https://github.com/wavebeem/wavebeem.com/pull/134/files

[Karl Dubost]

Thanks a lot for the additional context!

[Yulun Wu]

Pull request: https://github.com/WebKit/WebKit/pull/45408

[EWS]

Committed 295034@main (fd6ce0109386): <https://commits.webkit.org/295034@main>

Reviewed commits have been landed. Closing PR #45408 and removing active labels.