Justif - Publication-grade text justification and microtypography for the web
Show HN: Justif – Knuth-Plass justification and microtypography for the web
Justif brings professional, publication-quality text justification to the modern web by implementing the Knuth-Plass algorithm. It solves the common problem of uneven spacing and poor readability in digital layouts through advanced microtypography techniques. This tool allows developers to achieve the same typographic elegance found in printed books directly in their browser applications, ensuring that text flows naturally and aesthetically across different screen sizes and devices.
Justif delivers publication-grade text justification for the web, transforming how digital content reads with the precision of the Knuth-Plass algorithm.
- Rendello
I remember when I was learning CSS back in 2012, the guides said to never center-justify text as browsers did a terrible job. Since then, CSS has become way nicer, and yet justified text still looks awful. Great (or even good) typography always feels impossible on the web.
But this demo blew me away! Fantastic!
- torgoguys
I haven't looked at the API yet, but the demo is great on my phone. Instead of just justified blocks, can you have it do a "justified" (even amount of spacing) from an irregularly shaped right edge (in my case, an image on the right side of a design template I made)?
- svat
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!
- savoyard
A most welcome addition to a webmaster’s toolkit. Congratulations!
- svat
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!