The Corporate Shill

Tufte kit

I love Tufte's layouts: the text column, the notes beside the line they belong to, the restraint. Tufte CSS is the standard way to get that on the web, and when I started this blog I wanted it, but in React and Tailwind, and working properly on phones. So I rebuilt it. The rebuild lives in my fork, on the ilse_version branch.

The kit's demo page on a wide screen: text on the left and a numbered sidenote in the margin beside its line.
On a wide screen it looks like Tufte CSS, which is the point.

The margin stays a margin

On a narrow screen, Tufte CSS tucks every note behind a small number or a ⊕ you have to know to tap. My rule was that a margin note stays a margin note: no squashing it into the text, no bottom sheet. So on a phone the page keeps its margin, just past the right edge of the screen, with a plain word like "note 1" at the edge to show where a note is. Swipe the page sideways and the margin slides in, lined up with the text it annotates.

The kit on a phone: the text column, with the words note 1 set vertically at the right edge.
At rest. "note 1" sits at the edge, level with its line.
The same page swiped sideways: the margin note is now on screen beside the end of the text column.
Swiped open. The note is beside its line.
Tufte CSS on a phone: a single text column, with the sidenote hidden behind a small superscript number.
Tufte CSS at the same width. The note is behind the little 1.

What else changed

It sizes itself to the column it's in, not the browser window, so it holds its proportions at the in-between widths where Tufte CSS gets cramped. It lives in its own CSS layer, so it doesn't fight the rest of a site's styles. Notes too big for the margin open as drawers. Posts are plain Markdown, or React components when I want something fancier; Tailwind works alongside it if you want it. It needs no JavaScript. One optional 17-line script makes the sideways slide smoother.

For scale: Tufte CSS 1.9 is one stylesheet of about 460 lines with a single regression test. The kit is about 3,400 lines including its tests; around 165 of those per browser engine, run in Chromium, Firefox and WebKit.

Where it stands

It works, and this blog runs on it, but it isn't finished. A few known bugs are still open (mostly Safari keyboard focus, and drawers at phone widths); they're listed in the README. And the phone behavior has only been tested in desktop browsers pretending to be phones, so it needs real ones. I wrote about how it came together in How updated is my Tufte CSS, actually?.

Tufte CSS is by Dave Liepmann and is now an Edward Tufte project; the kit keeps its MIT license.

This post was written using Claude. I am working through a backlog of posts and topics, and I don't want to keep delaying. I hope to revise this post myself and remove this comment in the near future.