Some text should be found or styled on its own: a key sentence, the term being defined, a step of a proof that a script points at. \webspan[id=id, class={classes}]{text} names the text and gives it CSS classes, either or both; the classes are separated by spaces or commas, inside the braces. For one of the two alone there are short forms: \webid{id}{text} and \webclass{classes}{text}. Every glyph inside carries the mark however the lines break, so a rule in the page’s stylesheet reaches all of it. Behind the text, each line of a mark also has a band, from its first glyph to its last, spaces included: it is invisible until the page gives it a colour, and makes a highlighter, which a link’s colour cannot be mistaken for. Marks nest: an inner one keeps the outer classes, and the outer id unless it names its own. In print the text is simply typeset; a key \webspan does not know is an error in both.
A prime is a number with exactly two divisors. Every number above one is a product of primes, in only one way, and that is why they are called the atoms of arithmetic.
A prime is a number with exactly two divisors.
\webspan[id=euclid, class=key]{Every number above one is a product of
primes, in only one way}, and that is why they are called the atoms of
arithmetic.
/* a highlighter; a stroke of the same colour pads it, with round corners */.latex-blockrect.latex-mark[data-mark~="key"]{fill:#fff176;stroke:#fff176;stroke-width:3px;stroke-linejoin:round;}
A named mark is found from a script: reflowtex.host.mark(id) gives the elements of its glyphs and a rectangle for each line it is drawn on, to highlight it or place something beside it. Lines far from the window are drawn only as the reader nears them, and so are their marks.
const{elements,rects}=reflowtex.host.mark('euclid');for(constrofrects()){/* one rectangle per line */}
The reader’s marks
A page can let its readers mark text too. With the highlighter on the page, select some text on this one: a bar offers colours, and the text gets a band behind each of its lines, as the key sentence above has. The bands follow the text when the lines break again, a highlight may reach from one block into the next, and pressing highlighted text lets the reader change its colour or remove it. The page remembers them for the next visit.
<divdata-rtx="highlighter"></div>
Try it here. Select a few words of this paragraph and pick yellow, then select some of them together with the words after them and pick green. Only the words selected turn green: the rest of the yellow highlight stays yellow. A colour over a highlight of the same colour joins the two. To take a part out, select it and press the cross; to change a whole highlight, press it. Narrow the window, and the bands follow the words into their new lines.
Underneath, a highlight is a live mark: reflowtex.host.addMark takes the glyphs by their places in the text and draws them as the author’s marks are drawn, with its classes in data-mark.