How this is made
Colophon
The design of this library, the books it draws on, and how it is built.
The page and the background
Permalink to “The page and the background”The Lorenz attractor runs behind every page, and the text sits on a sheet of paper laid over it. Matthew Butterick’s rule in Practical Typography is to divide a page into foreground and background and never let the background upstage the foreground; the sheet is how that rule is kept here. It is opaque enough that the text reads as if on plain paper, and translucent enough that the lines show faintly through it, while the attractor’s two lobes open out on either side, where nothing needs reading.
The text
Permalink to “The text”Butterick’s first maxim is to decide the body text before anything else, because there is more of it than of anything else, and four choices settle it: size, line length, line spacing and font.
- Size. 20 pixels, in the middle of his 15–25 pixel range for the web.
- Measure. About 66 characters, Robert Bringhurst’s ideal from The Elements of Typographic Style (anything from 45 to 75 is comfortable).
- Leading. 145%, the top of Butterick’s 120–145% range, because the typeface is small on its body.
- Face. Newsreader, a text serif drawn for reading on screens, with optical sizes that tighten its display cuts for titles. Labels, numbers and captions are set in IBM Plex Mono. The two never mix: serif for the text, monospace for the apparatus around it.
Paragraphs are indented rather than spaced, as in a book, and the first after a heading is set flush. Text is set ragged right with hyphenation rather than justified, because justification on screen opens rivers the browser cannot close.
Margins and notes
Permalink to “Margins and notes”The sheet keeps a wide margin to the right of the text, and footnotes become sidenotes there, beside the line that cites them, as in Edward Tufte’s books. When the sheet is too narrow for a margin, they fold out inline when their number is tapped.
The background
Permalink to “The background”A live integration of the Lorenz system at σ = 10, ρ = 28, β = 8/3, stepped with fourth-order Runge–Kutta, so the figure is the real attractor rather than a drawing of one. A faint atlas, a single long trajectory, shows its whole shape; three live trajectories that begin 10⁻⁵ apart trace over it and drift into three paths within seconds. In the light theme it is drawn in ink, in the dark theme in light.
It keeps out of the way. Still, in the header, stops it and remembers the
choice; under prefers-reduced-motion it never moves at all; it rests while
the tab is hidden; and if it ever starts costing frames it gives up
resolution, then the length of its trails, then its motion.
The same system appears once more in the foreground, as Plate I: a running experiment with a caption, a live readout of how far three trajectories have drifted apart, and a sparkline of that distance on a logarithmic scale, where exponential growth draws a straight line.
The apparatus
Permalink to “The apparatus”- Accession numbers are given in the order entries were written, as a library numbers what it acquires; the call number adds the shelf.
- Catalogue cards close every entry, with the entry’s subjects as numbered tracings, as on the cards in a library’s drawers, and with what it cites and what cites it. The citations are computed when the site is built, by reading every entry’s links.
- The map is a force-directed graph drawn to a canvas: repulsion between every pair of nodes, springs along links, a weak pull to the centre. It settles and then stops, so an idle map costs nothing.
- Search (press /) runs in your browser over a small index built with the site. Nothing you type is sent anywhere.
Build
Permalink to “Build”Static HTML generated by Eleventy from Markdown files. A push to the repository builds it with a GitHub Actions workflow, and GitHub Pages serves it. No framework, no analytics, no cookies, no third-party requests; the fonts are served from this site. The only thing stored in your browser is your theme choice, and only if you change it.
Licence
Permalink to “Licence”Prose is CC BY 4.0: reuse it with attribution. The code is MIT. Both live in the repository.