Hacker News Reader

Comment by mpetroff | Hacker News Reader

The problem is that CSS uses greedy line breaks. In theory, this should improve once browsers implement CSS Text Module Level 4, specifically the `pretty` value for the `text-wrap` property [1][2]. Until then, we're stuck with poor-quality typesetting, or JavaScript solutions [3].

[1] https://www.w3.org/TR/css-text-4/#text-wrap [2] https://github.com/w3c/csswg-drafts/issues/672 [3] https://github.com/robertknight/tex-linebreak

View on HN

It’s not that CSS does that, but that browsers (all of them) do that. CSS has no opinion on the matter until text-wrap, where `text-wrap: stable` would dictate the current behaviour.

As an example showing that browsers have long been open to doing things better, this bug was opened against Firefox nine years ago, to implement Knuth-Plass: https://bugzilla.mozilla.org/show_bug.cgi?id=630181 (it hasn’t gone anywhere, of course, because it’s hard; but it shows willingness).

This had me wondering about whether it was possible to use pre-calculated line breaks to implement improved text justification in current browsers. I was able to come up with a demo [1][2] that does so, although it falls back to default line breaks in Safari due to lack of support for `text-align-last`.

[1] https://mpetroff.net/files/pre-calculated-line-breaks-demo/ [2] https://mpetroff.net/2020/05/pre-calculated-line-breaks-for-...

Ho-hum :) I'm slightly torn between admiration and horror:

> The key is to wrap all the potential line breaks (inserted via ::after pseudo-elements) and hyphens in <span> elements that are hidden by default with display: none;. Media queries are then used to selectively show the line breaks specific to a given column width.

Doesn't look like you compared with simply inserting soft hyphens - last I looked, that made columns bearable in browsers, although still not as good as proper line breaking.

I have `hyphens: auto` set for the browser default comparison in the demo, which is roughly equivalent to inserting soft hyphens for Firefox (where I was doing most of the development), as well as for Chrome on Android and macOS.

While browser hyphenation (either auto or soft hyphens) is definitely an improvement over no hyphens for narrower column widths, I think it generally makes things worse for wider columns, since it frequently adds unnecessary hyphens.

Edit: I updated the demo to use soft hyphens for the browser default comparison so the text is hyphenated in all browsers.

OK, I suspect Firefox hyphens auto may have improved since I last checked - at that time whatever I used (aspell?) seemed better at finding potential word breaks than whatever Firefox did (and getting Firefox to do sane word splitting on non-English was a bit of a quest).

Anyway, thank you for this - it's sad that we don't have anything really usable in the browsers still - but also nice to be able to work around the issue somewhat.

Reply on news.ycombinator.com