1872929 - text-wrap: balance with overflow-wrap: break-word sometimes break words before overflowing

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect)

Description

[git]

Steps to reproduce:

1. Create a document with three medium sized words, where the last two words combined are longer than the first word
2. Apply text-wrap: balance and overflow-wrap: break-word or anywhere to the element containing the words
3. Set the width of the element so that it is much wider than the length of the first word, but not large enough that the first two or three words on on the first line.

These steps have been performed in this Codepen for reproduction: https://codepen.io/evelynhathaway/pen/vYPLXxX

Actual results:

The text balances the uneven line length, but in many situations, the last few characters of the first line are forced to the next line, even it would not overflow.

In fact, it does not overflow if not text balancing is disabled nor does it if word breaking is disabled. In both disabled situations they also look correct, only in the case that both are present does it change.

Expected results:

If it will never overflow, overflow-wrap: break-word or anywhere should not impact the balancing. Nor should balancing cause a word break. The first word has plenty of room to not be broken up into two lines.

This issue in Firefox v121.0 on Windows is nearly identical to one confirmed and fixed in Chromium. In fact, I forked their reproduction Codepen to make the first word one character longer, as that's all that it too to make it occur for me in Firefox.

In Safari Technical Preview Release 185 (Safari 17.4 WebKit 18618.1.9.8) for macOS Ventura and in Google Chrome 122.0.6182.0 (Official Build) dev (64-bit) (cohort: Dev) for Windows 10, both the Chromium reproduction and the Firefox reproduction look as expected. Only Firefox is affected at the time of writing as far as I can tell.

Chromium Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1488018
Article from Chromium Bug Reporter: https://www.leereamsnyder.com/text-wrap-balance-and-overflow-wrap-in-chrome-mac

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[git]

Moved to Layout: Text and Fonts as the layout of balanced text during overflow is a issue. No DOM issues observed.

Comment 3

[Jonathan Kew [:jfkthame]]

Further reduced example:

data:text/html,<div style="overflow-wrap:break-word;text-wrap:balance;width:15ch">interconnection trouble

We should definitely block the balance algorithm from causing overflow-wrap to kick in...

Comment 4

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1872929 - Don't allow text-wrap:balance adjustment to cause an overflow-wrap line break to be used. r=#layout

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/37e84289c4e2
Don't allow text-wrap:balance adjustment to cause an overflow-wrap line break to be used. r=layout-reviewers,emilio

Comment 6

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/37e84289c4e2

Comment 7

[git]

Attachment: Balancing compared across Chrome (ideal state where it's continuing to balance), Firefox Dev 123.0b2 (original bug where letters are orphaned), Firefox Nightly 124.0a1 (no balancing)

Comment 8

[git]

I don't believe this is fixed. Chrome and Safari Technical Preview balance correctly with overflow-wrap: break-word or anywhere. However, in Firefox Nightly 124.0a1 (2024-02-05) and the same overflow styles, text-wrap: balance has no effect on page load. I noticed that it does appear to work after resizing the browser horizontally after each load. It occurs when resizing wider and narrower - sounds like triggered by a reflow?

Here's a new reproduction Codepen with the container expanded to test for balancing of the second word: https://codepen.io/evelynhathaway/pen/jOJKvMX

Here's a comparison between Chrome, Firefox Dev 123.0b2 (original bug where letters are orphaned), and Firefox Nightly 124.0a1 (new related bug, before resizing)
https://bugzilla.mozilla.org/attachment.cgi?id=9378439

Comment 9

[Jonathan Kew [:jfkthame]]

Huh, interesting - yes, something's not entirely right here. Thanks for the additional example.

I'm going to spin this off to a separate followup bug, to make it easier to keep track of the status of this, as the original issue here (incorrectly causing the use of an overflow-wrap break) does appear to be fixed.

Comment 10

[Jonathan Kew [:jfkthame]]

Followup issue filed as bug 1878865. Thanks for the report!