[Hint] Warn if word-break is used on non-CJK page, suggest word/overflow-wrap

[tigt]

Description

The CSS property word-break was designed for Chinese/Japanese/Korean line-breaking behavior, not Latin alphabets. For some reason (possibly due to MDN renaming its word-wrap article to overflow-wrap), a lot of newer Western websites abuse this property to break overlong words (URLs, long place names, etc.) if they get too large for the layout.

Two problems with that:

1. word-break: break-all breaks a word at the first character opportunity, instead of a natural word boundary.
2. Worse browser support than word-wrap: break-word, which goes back to old IE.

What should be tested exactly?

If an element has a non-initial computed word-break value, and that element’s lang doesn’t start with zh, ja, or ko, warn and suggest word-wrap/overflow-wrap instead. Like this:

elementWithComputedWordBreak.matches(':not(:lang(zh), :lang(ja), :lang(ko))')

[molant]

🤯 Fascinating, I had no idea about any of this. What would be a good starting article to learn more about this?

Not sure how to clasify this hint, maybe pitfalls? @antross what do you think?

@tigt right now we are preparing for the next major release and breaking a few things in the API so it might take us a while to get to it. If you have time and want to work on it maybe we can help you?

Thanks!

[antross]

Not sure how to clasify this hint, maybe pitfalls? @antross what do you think?

Pitfalls sounds right to me given this is a mistake that can occur even in the latest browsers.

[tigt]

I can't find an article that describes the problem, just articles about the word-break property itself (like on MDN and CSS-Tricks).

The spec's description and examples make it pretty clear it's for CJK publishing, though:
https://drafts.csswg.org/css-text-3/#word-break-property

I would be happy to work on this.