Everything html-revisor adds to a page, drawn with the real stylesheet. This page links client.css; change the stylesheet and both the tool and this page change.
How the tool looks. How editing as markdown behaves is in SCOPES-DESIGN.html.
Decided
(direction): decided, not built yet.
Not decided
Everything below this section is today's prototype. Where it disagrees with Decided, Decided wins.
Imperative 1. Color alone can't be distinct from every page: some page uses our pink. So every mark gets a halo, a white ring and a dark shadow: a light edge and a dark edge whatever the page.
Has a directive
Hovered
Box open
white
Has a directive
Hovered
Box open
near-black
Has a directive
Hovered
Box open
our pink
Has a directive
Hovered
Box open
red
Has a directive
Hovered
Box open
stripes
Has a directive
Hovered
Box open
pink border
Has a directive
Hovered
Box open
photo behind text
img: hovered, has a directive
Has a directive
Hovered
Box open
cat behind text
cat img: hovered
cat img: box open
What it shows. The halo keeps the crop marks visible on every ground, and the marker carries its own light ring and dark tile. On our pink, the white edge carries the corners; on the cat, the dark edge keeps them off the pale fur. The page element is never restyled, so the tile looks the same with or without the marks. The marker says "this element has a directive". It sits flush left of the first line.
Custom properties on :root, the same in light and dark mode: the material doesn't follow the page. Values are read from the stylesheet when the page loads.
The tool draws in its own layer above the page and puts no classes on page elements.
Hovering an element puts crop marks at its corners, and the cursor becomes a copy cursor: click to leave a directive or to edit the text.
.hrv-crop: four 10px corners, 2px thick, --hrv-crop-gap (4px) outside the element's box, with the halo. Each arm is at most 30% of its side, so a small SVG label still shows four corners. .hrv-selected, while the box is open: 16px corners, 3px thick, and a 1px outline.
This paragraph has a directive, and so does the div around it. Their markers sit side by side, left of the first line.
.hrv-marker: the icon on a 20px tile of the material, outside its element's box and flush against it, so it never covers what it marks and never reads as a neighbor's. It sits left of the first line, top edges aligned, over the crop mark at that corner; with no room on the left, above the top-left corner. The pencil tip points at the element either way. A marker that would land on another steps outward, left or up, and the inner element keeps the nearest spot. Hovering a marker shows crop marks on its element and .hrv-tip: the directive in the material, above the marker, or below it when there is no room.
Opens beside its element: below, above, right, or left, the first side with room in the viewport. It keeps that side while it fits, so it doesn't flip as the element grows under typing. With no room on any side (a tall element, a phone), it pins to the viewport edge farthest from what shows of the element. Along the other axis it shifts to stay in view, and the notch slides along its edge to point at the element. 320px wide or the viewport less 16px. The header names the element: its tag and the start of its text, or its alt. Saves 0.4 s after typing stops, and the footer says so: "saving…", then "saved" for 2 s, or "not saved" when the file changed on disk. Done, ⌘↵ and esc close it. Delete is a text button; ⌥⌘⌫ does the same. Fields grow with their text up to 240px, then scroll. The Content field wears the element's font, its size held between 12 and 20px.
Where it's headed
Any element. Below it, the notch on top.
A directive box with editor, for a scope: its field holds the scope's markdown. Above it, the notch below.
.hrv-icon: a magenta pencil, drawn as a mask from --hrv-pencil so it takes the accent. The tip faces right: the icon sits on the left of what it marks and points at it. The marker is the same pencil on a tile of the material.
.hrv-docket: bottom right of the window, always there. The count follows each keystroke. ↑ and ↓ (or ⌥↑ and ⌥↓, when the focus isn't in a text field) step through the directives in document order, wrapping at the ends: the element scrolls to the middle of the window and shows its crop marks for 2 s. Stepping doesn't open the box, since the box takes the focus and covers the page; the marker is right there to open it. Clicking the icon and count turns review mode off: no markers, no hover marks, no copy cursor, and clicks go to the page, links included. Click again to turn it back on. A save error stays on the docket until a save succeeds; the stale-file warning stays until reload.
Counting; with no directives, it shows only the count.
Review mode off: the icon and words go grey.
Save failed. The next edit retries.
Stale file: no more saves until reload.
One size, 13px at line height 1.4, everywhere in the layer. --hrv-font is system-ui. The directive field is --hrv-mono, monospace, since a directive is an instruction headed into an HTML comment. Labels and the hint differ by color alone: muted; the save status that replaces the hint takes the text color. The Content field: the element's own font.