Implement word-break and overflow-wrap style properties #315

valadaptive · 2025-03-25T16:14:22Z

Requires upstream support in Swash (dfrg/swash#89).

This implements the CSS word-break and overflow-wrap style properties (including the latter's influence on the layout's min-content size).

This replaces the "emergency break" logic with something that should be simpler.

Different browsers seem to disagree on exactly which ranges of text the properties apply to. The behavior implemented here should be reasonable.

In the table below, red is the default wrapping settings, blue is overflow-wrap: anywhere, and green is word-break: break-all:

Gecko	Blink	WebKit	Parley





			*

* This doesn't match browsers, but the behavior is officially unspecified per w3c/csswg-drafts#3897

DJMcNab · 2025-03-25T18:07:36Z

Wow, this is fantastic. I'm not really best placed to review this, but I do have a few initial thoughts.

That table is excellent! One thing which immediately jumps out at me is that using red/green for significant information is potentially challenging for colourblind users. I don't know of anyone on the team which this would impact, and I'm not suggesting that you should re-make the table (it looks like a lot of work...), but I'd recommend it as something to bear in mind in the future. (My understanding is that the general advice for having "side-channel" important information of this kind is to use e.g. patterns for differentiation; I'm not sure how practical that would be in this case...)

I'm not sure what to do about the new Korean tests. I guess showing that we lay things out correctly is quite cool, even without the actual glyphs being visible. If we can find a "sufficiently" small font with a suitable license, adding it to the repo is probably reasonable.

Are the tests standard? I see you link to wpt.fyi for one of them. Should the rest have a similar source provided/linked?

valadaptive · 2025-03-25T18:53:08Z

I've added links to the WPT page for the word-break: keep-all tests. Perhaps I should try implementing the other tests here as well? I think it would involve a lot of tedious manual porting.

As far as I can tell, the other tests (regarding which spans of text the CSS property "attaches" to) are original. I did just glance over at some of the WPT tests, and it looks like there's one (http://wpt.live/css/css-text/word-break/word-break-break-all-inline-007.tentative.html) that fails in all the browsers, and I think corresponds to this case:

I had to implement some weird behavior to replicate the browsers in that case (see the comment in layout/context.rs about applying each character's line breaking property to the next character), but actually just reverted it to the behavior that seems more sensible since WPT says it's the browsers' fault.

Regarding the Korean/Japanese tests, I decided not to include any CJK fonts since they're huge (Noto Sans JP is 4.5MB per weight). I added a comment about that.

Regarding accessibility, I changed the tests so that the bit of text with the relevant line-wrapping style property is underlined.

Also add a comment about missing CJK fonts

WPT says the behavior that makes sense is actually correct

Almost got me there...

xorgy · 2025-03-25T19:55:22Z

Thank you! I'm wondering how this will work with hyphen insertion (particularly with explicit hyphenation/break opportunities through U+00AD SOFT HYPHEN). Seems like it'll work well once we have that, and these properties (somewhat) affect that.

xorgy

I think it makes sense to consolidate the definitions of WordBreakStrength and just reuse/reexport that here.
Thank you!

parley/src/style/mod.rs

parley/src/tests/test_wrap.rs

nicoburns · 2025-03-26T01:47:31Z

Regarding testing, it's worth noting that we can run some WPT tests via Blitz (which is using Parley for text layout). We can't run everything though, because some tests require JavaScript (and some are designed for manual verification), so it may well be worth porting some of them.

For running word-break WPT tests with Blitz (basically anything that's screenshot based):

Clone https://github.com/DioxusLabs/blitz
Run cargo run --release --package wpt -- css/css-text/word-break
(if you have just installed then you can use just wpt css/css-text/word-break)
You can patch in a local version of Parley using the top-level (workspace) Cargo.toml

Currently we can run 5799/103 css/css-text/word-break (of which 2325 pass)
And 1079/1774 of all css/css-text tests (of which 314 pass)

nicoburns · 2025-03-26T04:04:40Z

parley/src/layout/line/greedy.rs

-                                } else {
-                                    self.state.append_cluster_to_line(next_x);
-                                    self.state.cluster_idx += 1;
+                            else if let Some(prev_emergency) =


Is it always correct to try "prev_boundary" first and then fallback to "prev_emergency"? Are there cases (OverflowWrap::Anywhere?) where we ought to use the later "emergency" breakpoint even if an earlier "regular" breakpoint is available?

I wonder whether we ought to just have one "previous break point" state that just gets set in different conditions depending on the line-breaking styles?

Are there cases (OverflowWrap::Anywhere?) where we ought to use the later "emergency" breakpoint even if an earlier "regular" breakpoint is available?

Text with OverflowWrap::Anywhere should only use an "emergency" breakpoint if there are no other opportunities to break the line.

The name "anywhere" is a bit confusing since it may give the impression that it behaves like word-break: break-all. but it's just break-word with the difference that it affects the min content size.

I don't think there's any way to get around having two different previous break points since we need that fallback behavior.

The name "anywhere" is a bit confusing since it may give the impression that it behaves like word-break: break-all

I see. Part of me feels like we ought not to stick to the CSS property names here and come up with something more sensible (but using the CSS properties is also very convenient for Blitz which can translate them 1:1 from Stylo)

nicoburns · 2025-03-26T04:12:59Z

parley/src/context.rs

+        let mut word_break = Default::default();
+        let mut style_idx = 0;
+
+        let mut char_indices = text.char_indices();
+        loop {
+            let Some((char_idx, _)) = char_indices.next() else {
+                break;
+            };
+
+            // Find the style for this character. If the text is empty, we may not have any styles. Otherwise,
+            // self.styles should span the entire range of the text.
+            while let Some(style) = self.styles.get(style_idx) {
+                if style.range.end > char_idx {
+                    word_break = style.style.word_break;
+                    break;
+                }
+                style_idx += 1;
+            }
+            a.set_break_strength(word_break);
+
+            let Some((properties, boundary)) = a.next() else {
+                break;
+            };
+
+            self.info.push((CharInfo::new(properties, boundary), 0));
        }


This seems pretty awkward, but I guess fine...

Yeah, it's a bit unfortunate. I thought about other ways to do it in Swash, e.g. passing in the word break strength with each call to next, but that would be a breaking change there and make it no longer an iterator.

I think you could make the analysis take an iterator over (char, WordBreakStrength) rather than just char? And you could have a different constructor for backwards compat.

nicoburns · 2025-03-26T11:29:00Z

Blitz branch pointed at this PR: https://github.com/DioxusLabs/blitz/tree/word-break-overflow-wrap

This PR is currently only making 1 extra test pass. But I wouldn't read too much into that. I can see some tests failing like https://wpt.live/css/css-text/word-break/word-break-break-all-010.html. But that test uses ch units which Blitz doesn't currently support (need to get font metrics out of fontique for that!).

Notes on debugging WPT tests using Blitz:

To open a specific test in Blitz: cargo run --release --package readme -- https://wpt.live/css/css-text/word-break/word-break-break-all-010.html
To inspect:

Press alt-h to enable inspector mode
Click on a node to have some debug info logged to console.

For inline formatting contexts you'll get something like the following:

Text content: " XXXXX"
Inline Boxes:

Lines:
Line 0:
  RUN (x: 0, w: 80)
Line 1:
  RUN (x: 0, w: 80)
Line 2:
  RUN (x: 0, w: 80)

valadaptive force-pushed the wrapping-styles branch from e2a8119 to f41145f Compare March 25, 2025 16:24

valadaptive force-pushed the wrapping-styles branch from 13749ca to 720fd6b Compare March 25, 2025 18:53

valadaptive closed this Mar 25, 2025

valadaptive reopened this Mar 25, 2025

valadaptive force-pushed the wrapping-styles branch 2 times, most recently from 849faf6 to e739ac0 Compare March 25, 2025 18:58

valadaptive added 5 commits March 25, 2025 15:13

Implement word-break and overflow-wrap styles

2884c08

Underline wrapped text in tests

31d99a4

Also add a comment about missing CJK fonts

Add note about break-all test origin

931f0d8

Remove word-break hack for matching browsers

87cdfac

WPT says the behavior that makes sense is actually correct

Add changelog entry for line wrapping styles

a636509

Almost got me there...

valadaptive force-pushed the wrapping-styles branch from 3f54c4a to a636509 Compare March 25, 2025 19:13

xorgy requested changes Mar 25, 2025

View reviewed changes

parley/src/style/mod.rs Outdated Show resolved Hide resolved

parley/src/tests/test_wrap.rs Show resolved Hide resolved

valadaptive added 2 commits March 25, 2025 17:31

Use WordBreakStrength from Swash directly

bf45a49

Add comment on jamo decomposition

7cd427c

valadaptive force-pushed the wrapping-styles branch from cd6f718 to 7cd427c Compare March 25, 2025 21:31

nicoburns reviewed Mar 26, 2025

View reviewed changes

nicoburns approved these changes Mar 26, 2025

View reviewed changes

valadaptive mentioned this pull request Mar 26, 2025

Handle single quotes in WPT reftest regex DioxusLabs/blitz#199

Merged

nicoburns mentioned this pull request Mar 7, 2025

Tracking issue: Features for Blitz #208

Open

21 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement word-break and overflow-wrap style properties #315

Implement word-break and overflow-wrap style properties #315

valadaptive commented Mar 25, 2025 •

edited

Loading

DJMcNab commented Mar 25, 2025

valadaptive commented Mar 25, 2025 •

edited

Loading

xorgy commented Mar 25, 2025 •

edited

Loading

xorgy left a comment

nicoburns commented Mar 26, 2025 •

edited

Loading

nicoburns Mar 26, 2025 •

edited

Loading

valadaptive Mar 26, 2025

nicoburns Mar 26, 2025

nicoburns Mar 26, 2025

valadaptive Mar 26, 2025

nicoburns Mar 26, 2025

nicoburns commented Mar 26, 2025

Implement word-break and overflow-wrap style properties #315

Are you sure you want to change the base?

Implement word-break and overflow-wrap style properties #315

Conversation

valadaptive commented Mar 25, 2025 • edited Loading

DJMcNab commented Mar 25, 2025

valadaptive commented Mar 25, 2025 • edited Loading

xorgy commented Mar 25, 2025 • edited Loading

xorgy left a comment

Choose a reason for hiding this comment

nicoburns commented Mar 26, 2025 • edited Loading

nicoburns Mar 26, 2025 • edited Loading

Choose a reason for hiding this comment

valadaptive Mar 26, 2025

Choose a reason for hiding this comment

nicoburns Mar 26, 2025

Choose a reason for hiding this comment

nicoburns Mar 26, 2025

Choose a reason for hiding this comment

valadaptive Mar 26, 2025

Choose a reason for hiding this comment

nicoburns Mar 26, 2025

Choose a reason for hiding this comment

nicoburns commented Mar 26, 2025

valadaptive commented Mar 25, 2025 •

edited

Loading

valadaptive commented Mar 25, 2025 •

edited

Loading

xorgy commented Mar 25, 2025 •

edited

Loading

nicoburns commented Mar 26, 2025 •

edited

Loading

nicoburns Mar 26, 2025 •

edited

Loading