Hacker News Reader

Comment by e12e | Hacker News Reader

Sadly, css/html hyphenation is still pretty awful. And AFAIK on mobile kerning is pretty far off too. So to me it feels more like a latex parody than homage, unfortunately.

Additionally, it took a long time for Chrome to even implement:

https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

https://www.chromestatus.com/feature/5642121184804864

Sadly, even with auto, there's way too much ragged right in html, or too irregular word spacing. Even with tricks like inserting soft hyphens.

A list apart long held up the pretty much gold standard, but it's still not as good as plain latex (not sure about plain tex, as I've never had occasion to use it).

Unfortunately it appears the current ala styling is worse than it used to be (probably due to a move to use modern css, which is understandable - but only highlights the problem).

View on HN

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

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.

Given the emphasis on typesetting I’m surprised LaTeX.css opted for rendering speed [1] over kerning [2]

  text-rendering: optimizeSpeed;

  text-rendering: optimizeLegibility;

[1]: https://github.com/vincentdoerig/latex-css/blob/3d5c1e9/styl...

[2]: https://practicaltypography.com/kerning.html

Thank you for this comment. I honestly didn't give it much thought at all when I copied it from the CSS reset [1] I used. I'll change it to `optimizeLegibility` asap.

[1]: https://github.com/hankchizljaw/modern-css-reset/blob/master...

Awesome. I like the project and the classless approach. Will PR if I stumble across anything else.

Reply on news.ycombinator.com