Pretext

A little bit ago, this thing called Pretext went viral. I wanted to mess around with it and this article exists so that I could have some text to mess around with.

If you don't know what Pretext is, it's a JavaScript library for dynamically laying out text. You know how in Microsoft Word when you inset a picture or shape, if you choose tight, it wraps the text tightly around your picture? Pretext is like that, but while Word can only treat all shapes like squares, Pretext can wrap around any shape. And it does it a trillion times per second, so if there is anything moving on the page, the text wraps around it fluidly.

Pretext was created by this guy called Cheng Lou and it pretty much immediately went viral when people started using it to do cool things. My favorite is this illustrated tapestry where a dragon follows your mouse around and breathes fire, burning away the words on a medieval book. I wanted to create my own page where you can type in anything you think of and it will create an AI image that you can then interact with the page with.

The rest of the text here is placeholder, I haven't finished writing the article yet:

Once you grant yourself permission to ask that question every frame, the obvious next thing is text routing around the actual silhouette of an arbitrary shape. Not its bounding box. The points of the star, the cleft of the heart, the negative space inside a key. That is what the page you are reading is doing right now.

The trick, as plainly as I can put it: for every visual line of text—a horizontal band twenty-eight pixels tall—the engine asks which patches of horizontal space are blocked by a shape. It rasterizes each shape to an offscreen canvas, scans the alpha channel inside the band, and finds where the opaque pixels are. Subtract those patches from the page width and you have a list of available intervals: the gaps between obstacles. Hand each interval to Pretext, ask “how many words fit in this width starting from where I left off,” render that fragment, advance the cursor. Do this per line, all the way down the page. When a shape moves, you re-do it. Pretext is fast enough that you can afford to.

The hard part wasn't the measurement—Pretext makes that feel almost free. The hard part was the silhouette. A bounding box around a star is honest geometry and boring text: the words wrap in a tidy rectangle that pretends the points aren't there. Per-pixel silhouette is what makes the wrap read as actually-around-the-shape rather than around-a-rectangle-someone-drew-around-the-shape. So every shape gets rasterized to its own little canvas at its current rotation, and the layout engine looks at that mask—not at any bounding box—to decide where the words can go.

Drag a shape and the text re-flows live. Click a shape and it does whatever it does. The star spins. The others, you'll have to find out. The sun isn't a shape you have to drag—it drifts on its own. Click it if you want it to stop.

There is a second phase to this page that, by the time you read this, is either turned on or about to be. Up above there's an input that takes a prompt and asks Claude to draw an SVG. The drawing comes back as markup, becomes a silhouette, joins the page, and the text routes around it like all the others. The plumbing for that is wired; it lights up when an API key is on the server. In the meantime there are a handful of shapes hardcoded in to give the engine something to chew on.

This article was written in parallel with the engine that lays it out. Sentences I added pushed shapes into new positions; shapes I added rewrote sentences. That was unexpectedly satisfying, and it is also why some of these lines feel a little too aware of where they are sitting. They are.

Try dragging the star. Or stop the sun.