Page MenuHomePhabricator

Word breaking and hyphenation is overly aggressive
Closed, ResolvedPublic

Assigned To
None
Authored By
Esanders
Oct 6 2021, 12:39 PM
Referenced Files
F35174958: image.png
May 25 2022, 6:32 AM
F35174964: image.png
May 25 2022, 6:32 AM
F34675963: image.png
Oct 6 2021, 12:42 PM
F34675961: image.png
Oct 6 2021, 12:42 PM
F34675952: image.png
Oct 6 2021, 12:39 PM
F34675954: image.png
Oct 6 2021, 12:39 PM
Tokens
"Heartbreak" token, awarded by Volker_E.

Description

Since T237230 some OOUI labels have word-wrap: break-word and hyphens: auto set.

This works for the case where very long words span the whole line, but it also breaks up short words that could just as easily be wrapped, making the text less readable:

e.g.

image.png (116×241 px, 7 KB)

image.png (75×256 px, 6 KB)

These examples are from OOUI but the original task applied these styles elsewhere so they may need to be looked at too.

Event Timeline

Removing hyphens: auto stops small words from breaking. It also removes hyphens from long words which have been broken, but this seems like a worthwhile tradeoff:

With hyphens: autoWithout hyphens: auto
image.png (136×247 px, 9 KB)
image.png (134×226 px, 8 KB)

Yeah, I agree that dropping the hyphens seems like a good middle-ground; Volker, do you consent?

The hyphens option is pretty 'dumb' with its word break logic. Esp. in languages with longer words like dutch and german where you have compound words. Browsers take any random syllable point to break the line causing very unreadable text even though that isn't really needed.

I experimented with it on en.wp for a bit and ppl were NOT enthusiastic and that was just English. ;)

Change 736800 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] Don't use CSS `hyphens`, just `word-wrap: break-word;`

https://gerrit.wikimedia.org/r/736800

Change 736800 merged by jenkins-bot:

[oojs/ui@master] Don't use CSS `hyphens`, just `word-wrap: break-word;`

https://gerrit.wikimedia.org/r/736800

Shoot, with all things happening last weeks, I just saw this. Would have been great to have a real ping @ above.
T245760: Introduce `break-word` on certain FieldLayout labels was the original task leading to usage of word-wrap: break-word and hyphens. In my orthographically sense, breaking long words, without a indication looks wrong and the smaller broken syllables are the exception, not the rule. And if that's a problem, that would be to discuss with language authorities, not in our circle.

In my orthographically sense, breaking long words, without a indication looks wrong and the smaller broken syllables are the exception, not the rule.

"long words" here means words that are longer than the whole line, which is definitely an edge case, usually with user input (like URLs in comment summaries) rather than designed components.

Using hyphen breaks words into syllables in tons of places. In the example in the description, a word is split at the majority of bounding box widths.

Update: thanks to User:Xaosflux, now the Meta could disable auto-hyphens.

Yet again, only this time despite disabling hyphens everywhere:
On that page, from my desktop or mobile, on Minerva skin, on all browsers, I see auto-hyphenation, despite disabling them twice! Inspecting the element, I see the following code is the reason:
#mw-mf-diffarea {
word-wrap: break-word
-webkit-hyphens: auto
}

If only were the code hyphens: auto removed, life would be much easier!
I don't wanna see auto-hyphenation EVER! I already noticed the unnecessary feature impossible to disable in Safari in a particular case, but now, this time it's impossible on all system.

Change 753557 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.43.0

https://gerrit.wikimedia.org/r/753557

Volker_E edited projects, added OOUI (OOUI-0.43.0); removed OOUI.

Change 753557 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.43.0

https://gerrit.wikimedia.org/r/753557

That might be true for English, but it's not the case for German.
I'm a big fan of hyphenation, and will always be.

withoutwith hyphens: auto example
image.png (792×1 px, 144 KB)
image.png (796×1 px, 147 KB)

100.000 mal besser mit – 100,000 times better with.

In my orthographically sense, breaking long words, without a indication looks wrong and the smaller broken syllables are the exception, not the rule.

"long words" here means words that are longer than the whole line, which is definitely an edge case, usually with user input (like URLs in comment summaries) rather than designed components.

Using hyphen breaks words into syllables in tons of places. In the example in the description, a word is split at the majority of bounding box widths.

Volker_E rescinded a token.
Volker_E awarded a token.
Volker_E added a project: Design.

Is there a reason why this ticket is still open if hyphens is not used anymore (but word-wrap: break-word;)?

No reply; closing