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.

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)

Almost got me there...

valadaptive · 2025-04-02T00:31:44Z

Now that swash 0.2.2 has been released, I don't think anything is blocking this other than another review.

waywardmonkeys · 2025-04-02T00:55:19Z

parley/src/tests/utils/renderer.rs

@@ -19,7 +19,15 @@ use tiny_skia::{Color, FillRule, Paint, PathBuilder, Pixmap, PixmapMut, Rect, Tr

 #[derive(Clone, Copy, Debug, PartialEq)]
 pub(crate) struct ColorBrush {
-    pub(crate) color: Color,
+    pub(super) color: Color,


Why make this super (and why as part of this PR?)

I think this was a change that I forgot to undo

waywardmonkeys · 2025-04-02T00:56:58Z

parley/src/tests/utils/renderer.rs

+}
+
+impl ColorBrush {
+    pub(crate) fn new(r: u8, g: u8, b: u8, a: u8) -> Self {


Rather just see this take a Color argument and then you can pass in things from color::palette::css instead which also gives them better names than a series of constants.

Didn't know those were available--done

xorgy

Thank you for your diligence!

nilsmartel · 2025-05-16T10:07:24Z

Thank you for making this more accessible, specifically to germans <3
(/s)

xorgy · 2025-05-17T00:02:16Z

Thank you for making this more accessible, specifically to germans <3 (/s)

Patches welcome for real German word breaking rules! (e.g. that thing with the eszett) :+ )

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 3 times, most recently 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 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

24 tasks

valadaptive added 6 commits April 1, 2025 20:05

Implement word-break and overflow-wrap styles

030d1e3

Add note about break-all test origin

74e3553

Add changelog entry for line wrapping styles

f88185c

Almost got me there...

Use WordBreakStrength from Swash directly

7fba28b

Add comment on jamo decomposition

e39680d

Switch back to published version of swash

f4d8c6c

valadaptive force-pushed the wrapping-styles branch from 7cd427c to f4d8c6c Compare April 2, 2025 00:07

waywardmonkeys reviewed Apr 2, 2025

View reviewed changes

Use peniko color type for test color

cc0c1c5

xorgy approved these changes Apr 2, 2025

View reviewed changes

Fix changelog punctuation typo

eaf5bad

valadaptive added this pull request to the merge queue Apr 3, 2025

Merged via the queue into linebender:main with commit 73f3828 Apr 3, 2025
21 checks passed

valadaptive deleted the wrapping-styles branch April 3, 2025 01:49

xStrom added this to the 0.4 Release milestone May 7, 2025

valadaptive mentioned this pull request Jul 1, 2025

Tracking issue: Features for egui #386

Open

17 tasks

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

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

Uh oh!

Conversation

valadaptive commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DJMcNab commented Mar 25, 2025

Uh oh!

valadaptive commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xorgy commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xorgy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nicoburns commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nicoburns Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nicoburns commented Mar 26, 2025

Uh oh!

valadaptive commented Apr 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xorgy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nilsmartel commented May 16, 2025

Uh oh!

xorgy commented May 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

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

xorgy commented May 17, 2025 •

edited

Loading