The Ink Engine

Depending on the version of this website you're looking at, you're likely experiencing the ink engine right now. Every line on this page was measured, broken, and placed by an engine I wrote; the browser draws exactly where it's told and makes no layout decisions of its own. That is a strange amount of machinery for a personal site, and all of it traces back to one feeling I couldn't shake: the web just feels so gridded.

Everything on the web lives in a rectangle, and every asset claims its own row and shoves the text aside to get it. Magazines don't work like that. In a spread, the pictures live within the text: a pull quote hangs in the middle of a paragraph, a stat panel sits where it's most useful, and the words wrap around them organically, sharing the page instead of splitting it. I wanted that for these case studies, because the pages are the product. A portfolio that looks like every other dev blog undersells the exact skill it's selling.

Ask a browser for a magazine, though, and it hands you a scroll. Before building anything I tried the tools the browser already has. CSS can float an image to one side and wrap text around it, and with shape-outside it can even wrap around a curve. I built a test page with both, and you can fake a lot that way. What you can't fake is the core magazine move. Put a figure in the middle of a column, run words down its left side and words down its right, keep them on the same baseline, and justify both. Magazines have done that for a century. The web, the most-read medium in history, simply can't. Every trick I tried could only pin a figure to an edge of the text and wrap around one side of it. I wanted the freedom to put elements anywhere.

The way through was noticing what the browser actually is: a superb rasterizer and a mediocre typesetter, and nothing forces you to use it as both. Measure every word yourself with a canvas measureText call and every layout decision moves into your own code; the browser gets nothing but positioned runs of text to draw. Donald Knuth solved the hard part, breaking paragraphs into good lines, back in 1981, and Knuth-Liang hyphenation is an npm install away. Nobody was standing between typography and code because the problem was hard. Nobody was standing there at all.

So I wrote the composer. Text flows down a column in baseline-grid steps. Each figure claims a rectangle of the column that text isn't allowed to enter, the figure plus a margin of standoff around it. I call that its keep-out. Put a figure anywhere in a column and it can have a region above it, a region below it, and a region to its left and to its right. It won't always have all four, but those are the only regions that can exist. That's the whole model, and one of my favorite moments of the project was sketching it in Excalidraw, handing the drawing to Claude as an image, and having it get exactly what I meant. It was like whiteboarding with another human. The column decomposes into regions around the keep-outs, text fills each region and cascades to the next, and a paragraph reads down one clean shape at a time. From there you can leave the edges ragged or turn on justification, which widens word gaps first and falls back to letter-spacing when widening alone would turn the line gappy. Hyphenation feeds the line breaker too, so even a narrow run beside a figure sets a decent line.

You might be wondering how I settled on this method. Instead of asking AI for one solution to the typesetting problem, I had it give me a bunch of options, watched what each one was doing, and looked at the results. Out of that came the keep-out idea. I had it build that too, compared it against the rest, and when I set them side by side there was a clear winner. It's a loop I've come to rely on heavily when designing novel systems and layouts with AI. Set up a gauntlet and let the best result make it out the other side.

The layout worked really well, but it had an artifact I hadn't expected. In my original conception an image was laid out in space and the words flowed around it, which means the width of the column drastically changes where in the text the image appears. That isn't what you want. When you add an image to a layout, you're usually trying to give a particular idea a particular emphasis at a particular point in the text. So what if I pinned each image to a character instead? Then the figure flows along with the text. If the viewport narrows, the layout changes, but the image always shows up where I wanted it. That one choice turned a fragile art-directed layout into something that survives being a responsive web page.

The last piece of the look was flourish. I wanted this to feel like a magazine, to emphasize text and pop things out, not just the normal stuff you see on the web. That's where inline ink came from: marker highlights, underlines, and the rest, all riding on the same line measurements I'd already built for the core layout. The engine paints each treatment as boxes behind the typeset runs, so the ink stays under its words through any reflow. It can do neat things too. When a sheared highlight wraps across lines, the per-line boxes union into one continuous polygon instead of a stack of parallelograms, for a cleaner, more polished look.

The last thing I added on top was authoring tools. Pretty much everything I build now where I'll be making editorial decisions gets tooling, so it's easy for me to make changes on the page or hand feedback to my agentic assistants. Here I drew a contract: markdown owns the words, and a JSON spec owns the geometry that defines the layout. The prose stays plain, portable text, and the spec records where the figures hang within it. The on-page editor only shows up in dev, since an end user has no reason to see it. In it I can drag a figure around, tune its standoffs, retype a caption, and save my changes to disk. Underneath, every figure is the same styled block with content in it, and the engine never looks at what the content is. Stat panels, drop caps, pull quotes, and a plain slab of color doing rhythm work are all defaults over that one shape.

I hope you enjoyed reading this. I hope it felt good to read, that something carried your interest and pulled you through the piece. I'd like to think a small part of that was the layout, and the elements I've added to give some whimsy and some character to what is, ultimately, a pretty wonky piece of text about typesetting.