Galactic Key · interface mathematics
One page, written as a formula
Every card below is placed by a single line of arithmetic instead of a pile of layout rules. That one change lets a computer answer questions a designer normally answers by eye.
What this is for. A page that is a formula can be measured on every screen instead of the three you own, searched instead of guessed, and checked for the rules you actually care about — before a reader finds the broken width for you.
How to read it. Ten questions, in order. Each one is something a hand-built page can only be checked for by hand. Every number on this page is measured in your browser as you read it.
1 · the same page, twice
Is the formula the same page the browser draws?
Written as arithmetic, the formula has to land on the same cards the browser would. Here they are side by side, and the gap between them.
Words break between characters in both frames because the formula counts characters per line. That is what makes the two agree to the pixel; real word wrapping is the first thing this approach has to grow.
If these two agree, every number below is about the page you are looking at, not a model of it.
2 · slope
If I turn one setting, how much shorter does the page get?
The formula can be tilted in each direction. One number per setting, in pixels per unit, at the width you chose above.
This is what a designer does by trying values in a code editor. It is the same answer, in one step, at any width.
3 · search
What is the shortest design that still shows every word?
Instead of guessing, walk downhill on the formula: shorter page, no text cut off. The text size is held where you set it unless you say otherwise, because that is a decision, not an optimisation.
A search is only as good as what you let it change. Spacing alone cannot rescue a page whose descriptions genuinely need a fifth line.
4 · every width
Is that true on every screen, or just the ones I tried?
The formula costs almost nothing to evaluate, so evaluate it at every whole pixel from 320 to 1920 — 1,601 screens — and count the ones where a description is cut off.
A design that passes at five widths and fails at two hundred is the normal outcome. Sampling is how the broken width gets shipped.
5 · jumps
Where does the page suddenly change shape?
Scan every width and list the places where the height moves by more than a line of text between one pixel and the next, with the reason.
Every jump is a place where a reader resizing a window sees the page lurch. They are the same places that make an animation hard by hand.
6 · soften
Can the page animate itself?
A jump is a hard switch: on or off. Replace every switch with a fast, smooth rise and the same page slides from one shape to the next, with nothing written twice.
The biggest lurch between two neighbouring widths, before and after softening, is the size of the animation. Nobody authored a keyframe.
7 · compress
How many numbers does the whole curve need?
Sample the page height at 512 widths and fit the curve with a few smooth terms. The error says how much of the page is smooth and how much is the jumps.
Smooth parts compress almost for free. The jumps never do, and they are exactly the parts your readers notice.
8 · between two designs
What sits between a phone-first design and a roomy one?
Slide every setting from one preset to the other and check the rule at each stop, rather than shipping the two ends and hoping.
Two good designs do not automatically have good designs between them. This is the cheapest way to find out.
9 · average
What does the typical visitor see?
The average of the page over all 1,601 widths, and how much of the total comes from the tallest quarter of them.
One number you can put in a review, instead of "it looks fine on my laptop".
10 · a width that does not exist
What does the page look like at an imaginary width?
Treat the screen width as a complex number — a width plus a small imaginary part — and plot the size of the imaginary part. Where the page changes shape, it spikes.
Two different routes — scanning every pixel, and one complex evaluation — name the same two widths. That agreement is the point: it is a real property of the page, not a picture of it.
what this does not claim