alt Hacker NewsShow HN: Justif – Knuth-Plass justification and microtypography for the web
Justif is a drop-in JavaScript library that progressively enhances web pages to TeX-level text justification. Installation is a single <script> line, standard text and accessibility affordances are unchanged, and users with JS disabled get native browser rendering.
I made justif because I've long been a fan of justified text. I think it looks clean and elegant, and makes reading more enjoyable. But bad justification is the opposite, with gaping spaces that distract me to the point of making the text near unreadable.
Browsers have got better recently at handling justified text [0][1], but still use suboptimal greedy algorithms for the most part, and are not near that TeX/InDesign level of quality that I crave. `text-wrap: pretty` exists but is far from a panacea, as you can see for yourself in the demo.
Justif also has the benefit of providing more consistent text layout across browsers. Blink (Chrome), Gecko (Firefox) and WebKit (Safari) all justify text differently, so normally what the user sees depends on what browser they use.
Take a look at the demo, play around with it, see if you can break anything. I'm open to improvements of the API design as well, so please let me know your thoughts.
For more details, see the README: https://github.com/lyallcooper/justif
0: https://cloudfour.com/thinks/justified-text-better-than-expe...
Comments
This is great! Loved the demo and controls (and nice touch to include The Frog Prince as one of the sample texts lol). I think by doing tracking and expansion you're going even further than original Knuth TeX did/does. Maybe for the demo when hyphenation is turned off, the browser side should also turn it off? Or leave it like this, justif without hyphenation still does better than browser with hyphenation :)
Wish this project great success!
This demo feels about as good as eating a spoonful of tiramisu
Side-by-side didn’t do it for me but flicker made all the difference!
This is great, wish that browsers would implement a better algorithm.
Also good execution with the demo page.
[flagged]
Chromium supposedly implemented Knuth-Plass for CSS's "text-wrap: balance", but reading the end of the tracking bug [0] it seems it stops at six lines? (Design doc: [1])
[0] https://issues.chromium.org/issues/40270471 [1] https://docs.google.com/document/d/1jJFD8nAUuiUX6ArFZQqQo8yT...
For OP: I think "Type specimen" should be the default sample text, just to get readers into the right spirit. :)
For anyone else reading this: make sure you click on the "controls & metrics" at the bottom to try out all the options (such as comparing with your browser's "text-wrap: pretty"); it's really cool!