1. The function
Eleven cards, a column count, line wraps, a 4-line clamp, a page height and four rules: all written as one straight list of operations, with no loops and no ifs.
Show the whole function
2. Try it
The real page, laid out by your browser's CSS. Dashed outlines are where the function says each card goes.
Screen and design
- Solid card
- Laid out by your browser's own CSS grid.
- Dashed outline
- Where the function predicts the card.
- Red card
- Text is cut off by the 4-line clamp.
- Green rule
- The rule holds on this screen; the number is its spare room in px.
- Red rule
- The rule fails on this screen.
Width of the reader's screen in CSS pixels, from a small phone (320) to a wide desktop (1600).
The reader's text size, as a multiple of the normal size. People who need bigger text set this on their device.
Space between cards, in pixels. A design choice.
Empty space around the whole grid, in pixels. A design choice.
Space inside each card around its text, in pixels. A design choice.
A new column appears only when every card can be at least this wide, in pixels.
The grid stops growing at this width and centres itself on wider screens, in pixels.
Put the five design sliders back to the starting design, which breaks one rule on some screens.
3. Prove it
Not a sample of screens: every screen from 320 to 1600 px wide, at every font size from 0.85 to 1.30. The prover bounds the function over whole boxes of screens and splits a box only when it cannot decide.
Rules to prove
- Green
- Proven: the chosen rules hold at every screen in that box.
- Red
- Proven: some chosen rule fails at every screen in that box.
- Amber
- Undecided: the box is too thin to split further.
- Ring
- The screen loaded in Try it.
Prove the chosen rules for the current design over every screen. Tap the map afterwards to load any screen into Try it.
4. Repair it
When a rule fails, the page searches for the smallest change to the design that passes. Gradient descent proposes; the prover checks every screen; any screen that still fails is added to the training set; repeat.
Repair the design
- Proven
- That round's design keeps the rules on every screen.
- Fails
- The prover found screens that break a rule; they join training.
- Bold value
- A design value the repair changed.
Search for the closest design that keeps the chosen rules on every screen, then prove it. Stops after 10 rounds.
Load the repaired design into Try it, so you can drag the screen and see it hold.
5. Where it jumps
Between jumps the layout moves smoothly. The jumps (a column appears, a line wraps) are steps in the function, so the page finds every one exactly instead of sampling.
Jumps across widths
- Line
- Page height at each width.
- Tall mark
- A column appears or goes.
- Short mark
- Some card's text wraps to a different number of lines.
Find the jumps at this text size. Bigger text wraps sooner, so the jumps move.
6. Check the checker
A proof is only as good as the function and the bounds. Three tests, run here on your device: the function against your browser, the bounds against the function, and the proof against the function.
Run the checks
- Pass
- No disagreement found.
- Fail
- At least one disagreement; the count is shown.
- Broken copy
- A deliberately broken version that the test must catch.
Lay out 300 random screens with your browser and compare, then test 20,000 bounds and the last proof. Takes a few seconds.
Limits
- The proof covers the function. The browser check shows how closely the function matches your browser; it is a test on random screens, not a proof about the browser.
- Text is set in a monospace font so that a line's width is its letter count times one measured advance. Proportional fonts need per-word widths; the same method works but the function grows.
- Screens are 320 to 1600 px wide at font size 0.85 to 1.30. Outside that box nothing is claimed.
- Repair snaps values to whole pixels and gives up after 10 rounds; it says so when it does.