Plate № 34 · editorial · provenance
A pattern from the gf.cx specimen book
Show your work
"A dedicated 'how-we-calculate' is a new pattern for explaining calculation."
The problem
A page states a derived figure — ≈ $54,000 in today's dollars, 23% of new, 18 recoverable restore points — and the reader has no way to tell where it came from or whether it's right. A bare number is a claim. It might be a live calculation, a stale hardcode, or a guess; nothing on the page distinguishes them, and figures baked by hand have a documented habit of quietly going stale.
A hover tooltip can carry the one-line arithmetic ($33,500 × (333.918 ÷ 207.342) ≈ $54,000), and it should. But it can't carry the method — which exact index, snapshot on which date, rounded to what and why, computed live or from frozen inputs. A footnote large enough to hold all of that would drown the page it annotates. The calculation has outgrown the margin. It needs its own room.
| Piece | What it does |
|---|---|
| a dedicated page, scoped to the subject | The method lives at its own URL under the thing it explains — e.g. /vehicles/ford-f250/calculating-values-with-inflation. Scoping it under the subject (not a global /methods/ bucket) keeps it discoverable and lets sibling subjects each carry their own. |
| the figure links to it | Not the reverse. The reader meets the number first, in context; the method is one click away for whoever wants it, invisible to whoever doesn't. The link rides the interactive tooltip's "Learn more ↗" — the figure's own hover card. |
| formula → inputs → worked arithmetic | The page shows the calculation in full: the formula as an object, every input value named exactly, and the arithmetic worked end-to-end so any figure on the source page can be checked by eye against it. |
| frozen inputs, stated as such | The inputs are stored in data (a JSON field), not fetched live, so the published figure is reproducible and the method page and the source figure always agree. The page says so, with the snapshot date — a number that silently moves is a number nobody can reproduce. |
The load-bearing inversion is the direction of the link. The instinct is to footnote the figure — to hang the explanation off it inline. The pattern does the opposite: it promotes the explanation to a first-class page and has the figure reference it. The number stays quiet in the reading flow; the rigour is there for anyone who reaches for it.
The element, in-page
The entry point is a figure whose interactive card carries a "Learn more ↗" to its method page. Hover the restated price below and travel into the card — the link goes to the live first instance of this pattern.
The F-250 left the lot at roughly $33,500 — ≈ $54,000 in 2026 dollars. The one-line arithmetic rides the hover tip; "Learn more ↗" opens the full method.
The method page it opens carries what the tooltip can't: the formula set apart as the object of the page, the exact BLS series id, a worked table for every vehicle, the rounding rationale, and a section on why the index values are stored rather than fetched live.
Where it applies
- Any figure a reader might reasonably want to check or reproduce — an inflation restatement, a depreciation percentage, a total cost of ownership, a restore-point count, an SEO score. If the number is derived, the derivation is a candidate for its own page.
- Especially when the method has parts a tooltip can't hold — a named data source, a snapshot date, a rounding decision, a live-vs-frozen choice. One line of arithmetic stays in the tip; the rest earns a page.
- Not needed for a self-evident figure (a plain sum of visible rows) — reach for it when the how is non-obvious and the reader's trust depends on being able to see it.
Reusable elements
The named, copyable pieces — lift any one without the others:
- the subject-scoped method URL —
/<subject>/<calculation-slug>. The page lives under the thing it explains, so it's discoverable from the subject and sibling subjects can each carry their own without a naming collision. - the figure-links-to-method inversion — the reader meets the number in context and the method is one click away, via the interactive tooltip's "Learn more ↗". The explanation is promoted to a page, not demoted to a footnote.
- formula-inputs-worked layout — formula as a set-apart object, every input named exactly, arithmetic worked end-to-end in a table so any published figure checks by eye. The reader can audit without opening the code or the data.
- frozen-inputs discipline — store the calculation's inputs in data (not a live fetch) with a visible
retrieveddate, so the figure is reproducible and the method page and the source figure can never disagree. A refresh is a deliberate act, never a silent side effect of loading the page in a new month.
Reference
- Source
- Dan, 2026-08-13 — on the vehicle cost-when-new figure: "A dedicated 'how-we-calculate' is a new pattern for explaining calculation." Reverses an earlier "no link, just the method in the tooltip" decision once the method outgrew the tip.
- In use / example
- home.gf.cx/vehicles/ford-f250/calculating-values-with-inflation — the first instance: the CPI-U restatement behind every vehicle's "cost when new" figure. Reached from the figure's interactive tooltip.
- Companion patterns
- A tooltip you can reach into (the "Learn more ↗" entry point) and the vehicle page structure (where the first instance lives).
- Reusable elements
- subject-scoped method URL · figure-links-to-method inversion · formula-inputs-worked layout · frozen-inputs discipline (listed above).
- Origin
- The vehicle "cost when new" figure restated a 2007 sticker into 2026 dollars; the arithmetic fit a tooltip but the method (BLS series, snapshot date, rounding, stored-not-live) did not. Promoting the method to its own page, 2026-08-13, is the first instance.