From d185382d844673ade86f74b87a95e6e8725faff6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Tue, 1 Sep 2026 03:21:26 +0100 Subject: [PATCH] show the space the page is not using MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two hairlines said where the measure ends and left the reader to notice that everything outside them was empty. The margins are tinted now, faintly, so the unused width reads as what it is — room the page does not occupy, which is the question somebody widening a gutter or judging a desktop layout is actually asking. Faint on purpose: it is absence, and anything stronger competes with the content for the eye. Nothing is drawn at all when the frame is no wider than the measure, which is the existing early return. Co-Authored-By: Claude Opus 5 (1M context) --- web/canvas.ts | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/web/canvas.ts b/web/canvas.ts index bf2ff5d..c89e746 100644 --- a/web/canvas.ts +++ b/web/canvas.ts @@ -512,6 +512,37 @@ export function paintMeasure(document: Document): () => void { // lines against the edges would be noise claiming to be information. if (box.width >= (document.documentElement.clientWidth || 0) - 1) return; + /* + The margins THEMSELVES, not only the lines that bound them. + + Two hairlines say where the measure ends and leave the reader to notice that the space outside is + empty. Tinting it says what that space IS: room the page is not using, which is the question + somebody widening a gutter or judging a desktop layout is actually asking. On a narrow frame there + is nothing to tint and the block below returns before drawing any of it. + */ + for (const [side, from, width] of [ + ['left', 0, box.left], + ['right', box.right, (document.documentElement.clientWidth || 0) - box.right], + ] as const) { + if (width <= 0) continue; + const margin = document.createElement('div'); + margin.setAttribute(MARK, `measure-margin-${side}`); + style(margin, [ + 'position:fixed', + 'top:0', + 'bottom:0', + `left:${Math.round(from)}px`, + `width:${Math.round(width)}px`, + // Faint, because this is the part of the screen the page does NOT occupy: it has to read as + // absence. Anything stronger competes with the content for the eye. + `background:color-mix(in srgb, ${ACCENT} 7%, transparent)`, + 'pointer-events:none', + 'z-index:2147482999', + ]); + document.body.append(margin); + guides.push(margin); + } + for (const [side, x] of [ ['left', box.left], ['right', box.right],