OptiVis Labs

Research / Explainers / 3 of 6

A highlighter that paints only what is on the page

Span stamps each clause of a sentence as a verbatim span of a page, with its UTF-8 byte offset, or as not a verbatim span. This illustration shows the mechanism at the level of bytes: a page laid out so that every character takes the width of its bytes, a ruler beneath it, and a highlighter that can paint only characters that are there.

  • StatusIllustration
  • Published2026-10-06
  • Example textInvented
  • Embedded onSpan
  • State in the address?clause=
  • Codelib/explainers/span.ts, lib/span.ts
  • Protocolv1.0

IllustrationExplainer

A highlighter that paints only what is on the page

A citation is a verbatim range, or it is not one.

Claim, 2 clauses1Ships in two business days from ourMontréal warehousebytes 14 to 692and the base is café-grade steelnot a spanPage, visible text, one cell per byteHarbor kettle Ships in two business days01014203040from our Montréal warehouse.506069Café-grade steel base. Two-year8090100warranty.110
Clause

Clause 1Verbatim span

Ships in two business days from our Montréal warehouse

Painted at bytes 14 to 69 of the visible text: 55 bytes for 54 characters.

Cursorbyte 14 holds "S", character 14

Page113 bytes, 111 characters

Illustration. The page text and the claim are invented. The stamps and byte offsets are computed by the same code the Span tool runs.

The sentence it teaches

A citation is a verbatim range, or it is not one.

Method

  1. The claim is cut into clauses at sentence ends, semicolons and ", and" joints, the same rule the tool uses.
  2. A clause is verbatim only if it appears in the page exactly, after one normalization on both sides: runs of whitespace collapse to a single space. Case, quotes, hyphens, plurals and word order all count as differences.
  3. The offset is counted in UTF-8 bytes from the start of the visible text. A character outside ASCII takes two or more bytes, so its cell is drawn that many bytes wide and the ruler shows the difference.
  4. A clause that is not verbatim is not painted. The nearest sentence on the page is shown as a similarity, labeled not a match.

What this does not show

  • It does not show the share of clauses that are verbatim on real pages. That denominator is stated on the tool page and no run exists yet.

State in the address

The figure keeps its state in the query string, so a particular view can be linked and the page still renders completely without it.

  • ?clause= the clause whose paint is shown, by number

The same figure is embedded on the Span tool page.

Cite this explainer

OptiVis Labs. A highlighter that paints only what is on the page (explainer). 2026. https://optivisai.org/research/explainers/span

@misc{optivislabs2026explainerspan,
  title = {A highlighter that paints only what is on the page (explainer)},
  author = {{OptiVis Labs}},
  year = {2026},
  month = oct,
  howpublished = {\url{https://optivisai.org/research/explainers/span}},
  note = {A citation is a verbatim range, or it is not one. Illustration with invented example text.}
}