undefined | Better HN

0 pointsmpetroff5y ago0 comments

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-...

0 comments

e12e5y ago

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.

mpetroffOP5y ago

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.

e12e5y ago

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.

j / k navigate · click thread line to collapse

0 pointsmpetroff5y ago0 comments

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

0 comments

e12e5y ago

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

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.

mpetroffOP5y ago

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

e12e5y ago

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.

j / k navigate · click thread line to collapse