Pretext and Donald Knuth

Today my blog reads a little differently. I just rolled out two typographic changes inspired by the new pretext library, and I want to share a bit about why.

Cheng Lou just released pretext, a pure JavaScript/TypeScript library for multiline text measurement and layout, in a Twitter thread that set the platform on fire.

There’s been a lot of really fun demos with objects moving all around text blocks in ways that are super fun demonstrations of the power of the library, while being obviously unsuitable for any text anyone actually wants to read.

But Cheng Lou also had a much simpler looking demo that really caught my interest: using pretext to implement optimal global line-breaking with syllable hyphenation — the Knuth-Plass text justification algorithm.

Justified Text on the Web

Almost any printed book you read will have justified text — text aligned flush against both the left and right margins, with the spacing between words adjusted so each line fills the full column width. It’s the standard for serious typography in print and has been since the earliest days of the printing press.

On the web, however, the justification algorithm built into browsers via the text-align: justify CSS property is far too simplistic. It works line by line, greedily filling each line with as many words as it can, then stretching the spaces to fill the remaining gap. The result is often wildly uneven spacing — rivers of white running down through paragraphs — that makes the text harder to read. This is why justified text is so rarely used on the web.

The Knuth-Plass algorithm, developed by Donald Knuth and Michael Plass for the TeX typesetting system, takes a completely different approach. Rather than greedily filling one line at a time, it considers the entire paragraph as a global optimization problem. It evaluates thousands of possible line-break arrangements and picks the one that minimizes the total deviation in spacing across all lines. The result is dramatically more uniform spacing throughout, producing text that actually looks and reads like a printed book.

I’ve always missed justified text on the web. Today I got an agent runner to apply the pretext variant on my blog, and I’ll try it on for a bit.

Fitting Titles to a Single Line

As a small bonus, I also used pretext to make sure each article title fits on a single line — no wrapping — and is scaled to take up exactly 80% of the viewport width or the full width of the body text column, whichever is larger.

This is another typographic layout device that really benefits from quick calculations of text dimensions in the current browser and viewport. On a wide screen, the title breaks out of the content column and becomes a bold, centered statement. On a narrower screen, it fills the column naturally. Either way, it never wraps.

The Prompt

I used this prompt to implement it:

Based on the pretext library:

Read this example of using pretext to implement justified text knuth hyphenation algorithm

https://github.com/chenglou/pretext/blob/b042fac024a5b70bdbc292bd491806afce837eed/pages/justification-comparison.html
https://github.com/chenglou/pretext/blob/b042fac024a5b70bdbc292bd491806afce837eed/pages/justification-comparison.ts

Make the body text of the blog posts justified using optimal (Knuth-Plass) justification algorithms via pretext.

Love new tools that make bold typography more viable on the web.