The Found State

Where this comes from

No plate in assets/source/manual/ draws a highlight, and neither mockup carries one, so this chapter is derived from the language the way Plot and Table are: built only out of parts the manual does establish — the hairline, the light layer, the lattice cell, the presence ladder. What makes it worth deriving is the name over the door. Control-F is find-in-page. A brand whose whole argument is that data can be found in a space rather than read off a sheet cannot leave the drawing of a found thing to the browser's default yellow.

And that is what it had been leaving it to. The platform gives an author four registers for this is the thing you were looking for, and until this chapter one of them was styled:

What a highlight may be made of

This is the constraint that shaped the drawing, and it is worth stating before the drawing itself. A highlight moves — the reader drags, steps, scrolls — so the browser has to be able to repaint it without laying the page out again. Highlight pseudo-elements therefore take a closed property list, and everything that would change geometry is off it:

That last row is the interesting one. background-image is ignored on a highlight pseudo-element, which makes the found state the one surface in this system that may not carry a gradient — no --gradient-foil, no --gradient-light, no member of the family. Every other lit thing here is a ramp. This one has to be made of a flat light and a line.

Two rungs

Find-in-page has drawn two states since the day it existed — every match, and the one you are standing on — and no system here had named the difference. It is the presence ladder, read as attention rather than as arrival: same object, one rung apart, and an object may move along the ladder but never across it.

<mark class="cf-mark">ground line</mark>
<mark class="cf-mark--current">the same word with the light on</mark>

The rule is a ground line and not a box, and that was a decision rather than a shortcut. Two rules — underline and overline — are the obvious answer: the top and bottom edge of a cell, the only box a highlight is allowed to have. It was built that way first and then looked at. There is no text-overline-offset in CSS: the underline can be pushed clear of the descenders and the overline cannot be pulled down at all, so it lands on the font's ascent, well above cap height, and reads as a detached rule floating over the word instead of its opposite edge. An asymmetric band is worse than no band. One line at twice the weight draws what it means — and it is what the rest of this system already does, because an isometric object has no bounding box either. It has a lattice edge under it.

2 px, not the 1 px hairline, and that is a collision rather than a preference: an unclassed link in this system is a 1 px underline at 0.2em, one notch inside the mark's own 0.22em. At the hairline weight a match and a link would be the same drawing. Both weights are sanctioned screen strokes, so the mark takes the second one.

On a dark surface the rule inverts and the light does not, because the light is the light — there is nothing for lime to become on black. --found-rule resolves through --border-strong, so it follows the inverse theme without the found state knowing the theme exists.

<mark> is an element, so .cf-mark could have a real 1 px border, 2 px of padding and a --radius-sm corner like every other object in the system. ::target-text cannot, ever. Two drawings for one meaning is worse than one constrained drawing, so the element is held to the pseudo-element's means — a match looks the same whether the server marked it, a script registered it, or the URL arrived carrying it.

A page that searches itself

The Custom Highlight API is the register that had nothing registered against it. It takes Range objects and paints them through ::highlight(name) without touching the DOM — no wrapper elements, no re-parse, nothing for a screen reader to trip over. The system ships the two names and their styling; a page supplies the ranges.

// The whole feature. The styling is already in base.css.
const found = new Highlight();
const current = new Highlight();
current.priority = 1;               // the lit rung wins the overlap
CSS.highlights.set('cf-found', found);
CSS.highlights.set('cf-found-current', current);

// …for each hit, a Range over the text node, then:
found.add(range);
current.clear(); current.add(ranges[i]);

Arriving on a match

A URL can carry the phrase it means rather than an anchor somebody remembered to add: #:~:text=…. Search engines mint these, readers share them from the browser's own Copy link to highlight, and the destination page implements nothing at all — it only has to have drawn the state, which is what ::target-text is. This is the register with the widest reach and the least code.

The article scrolls to Bevor irgendetwas simuliert wird and lights that clause in the found state — the lit rung, because a reader who arrives on a phrase is standing on it by definition. Nothing on that page knows this happened.

Findable while hidden

The last piece is the one that is not a drawing. Content collapsed with display: none is invisible to find-in-page, to a text fragment and to a search engine — so a reader searching for a word that is genuinely on the page is told it is not. hidden="until-found" is the fix: the browser applies content-visibility: hidden instead, keeps the text searchable, and reveals the block when a match lands inside it.

<div hidden="until-found" id="answer-7">
  <!-- no border, no padding, no background on THIS element -->
  <p>…</p>
</div>

Measured

A custom highlight owes two figures, not one: 4.5:1 for the text against the highlight, and 3:1 for the highlight against the surface around it. The second is the one that decides this drawing.

Lime cannot hold the boundary at either end of the page — it sits at 87.5 % of white's luminance, which is what makes it light and what makes it useless as an edge. So the ink holds it and the light ranks it. The ground line is not decoration and cannot be dropped: remove it and the found state fails 1.4.11 on every surface the site has. It is also, in the same stroke, the answer to never carry a state by colour alone — the rules are what makes the mark, and the fill is what says which one is current.

Anatomy

Rules