This post exists to make the width control obvious. At full stretch, every paragraph follows the browser edge. In columnar mode, the same material sits in a stable centered measure while the surrounding black field absorbs the remaining space.
The control should feel structural rather than decorative. It belongs in the header, responds to keyboard and touch input, and remembers the selected mode on this device as you move between the blog roll and individual posts.
A heading at working scale
Longer writing needs more than a single paragraph to reveal its geometry. This section adds enough vertical rhythm to make line length, heading scale, and the relationship between adjacent blocks easy to judge on both an ordinary laptop and a very wide display.
The useful test is not whether a layout looks tidy in one screenshot. It is whether the page continues to feel intentional as the viewport changes.
Things to inspect
- The left and right edges of paragraphs.
- The alignment of the title, date, headings, and body.
- The persistence of the selected width after following a link.
- The behavior on a narrow phone where both modes naturally converge.
const mode = localStorage.getItem('ektasis-reading-width') || 'stretch';
document.documentElement.dataset.readingWidth = mode;This final paragraph is ordinary on purpose. If the surrounding typography disappears and the prose remains easy to scan, the control is doing its job.