diff --git a/web/canvas.ts b/web/canvas.ts index bf2ff5d..b957bcb 100644 --- a/web/canvas.ts +++ b/web/canvas.ts @@ -541,7 +541,17 @@ export function paintMeasure(document: Document): () => void { style(label, [ 'position:fixed', 'top:0.25rem', - `left:${Math.round(box.left + 4)}px`, + /* + Outside the measure, past the RIGHT guide. + + It sat just inside the left edge, which is on top of the page — over the logo, on this site — + and it is not part of the page. The margin is the one place on screen that belongs to the + editor rather than to the site, so the number that describes the measure goes there. + + Right rather than left because the eye reads the guide, then the width: the label is the answer + to the line it sits beside, and the right margin is the one a wide frame actually has room in. + */ + `left:${Math.round(box.right + 6)}px`, 'font-size:0.625rem', 'font-family:ui-sans-serif, system-ui, sans-serif', `color:${ACCENT}`,