undefined | Better HN

0 pointse12e5y ago0 comments

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.

0 comments

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

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