Inline Text Expansions: Context Without Clutter
How the new inline expansion pattern keeps articles skimmable while still surfacing citations, context, and nerdy details on demand.
Why not footnotes or links?
Long-form writing keeps forcing the same trade: bury the interesting detail in a footnote, hide it behind a link, or cut it. All three move the reader somewhere.
A footnote sends the eye to the bottom of the page and asks it to find its way back — a small context switch, paid every time. A link is worse: it sends the reader off the page entirely, and the good ones don't come back. Cutting the detail keeps the main line clean but loses the nerdy payoff that made the piece worth reading.
An inline expansion keeps the context exactly where the reader already is. The main sentence stays skimmable; the depth unfolds in place, on demand, and folds back up when they're done. Any phrase can become a trigger . Nobody leaves the paragraph.
How the component works
- Editors add
data-inline-contentto any inline element. - An optional
data-inline-sourcesattribute supplies citations. - The React component scans the rendered HTML and wires up toggle behavior.
Everything runs client-side so MDX or CMS content stays portable.
Accessibility considerations
The trigger receives role="button", tabindex="0", and aria-expanded state. Escape collapses the active expansion. Screen readers hear the extra copy in an .
Editorial workflow
You can treat expansions like structured footnotes. Here is the JSON you drop into data-inline-sources:
{"title":"Internal design note","url":"https://example.com/design-note"}
Multiple sources? Just provide an array. The component pings our /api/link-status endpoint before rendering so we never show dead links.
Where it earns its keep
The pattern shows up all over this blog, always doing the same job: keeping one clean sentence on top of a pile of detail. In Why Your Brain Prefers Folders, every neuroscience claim hangs an fMRI citation off a single phrase, so the argument reads at a glance and the sourcing is one tap away. In Spacewar! From DOS to Web, the exact reverse-engineered physics constants — rotation rates, thrust values — live in an expansion instead of clogging the prose. In DOSBTS, a full paragraph on Apple's entitlements sits behind one word for the reader who wants it, and out of the way for the one who doesn't.
If you're reading in the dark retro theme, tap any highlighted phrase to see the expansion open with that DOS-style glow.
The rule of thumb
Reach for an inline expansion when a detail is worth including but not worth interrupting for — a citation, a definition, a number only some readers want. If the aside is essential to the argument, it belongs in the main line. If it's genuinely disposable, cut it. The expansion is for the wide middle: the context a reader might want, offered without making anyone take it.