Text highlighting for PDF.js and HTML
Highlights that sit on the glyphs, and move like ink.
glyphline draws a sentence outline that morphs, a word cursor that glides between words, the reader's selection as one shape, and saved marks. On PDF pages the positions come from the embedded fonts, so the boxes land on the printed letters at any zoom.
- ✦ One package: core, React and Svelte 5 adapters
- ✦ pdf.js pages and plain HTML, one API
- ✦ Interruptible motion, reduced-motion aware
- ✦ No dependencies; React, Svelte and pdf.js are optional
A real PDF page rendered by pdf.js. The cursor follows a timer here (no audio); in a reader it follows the voice. Text stays selectable: drag across it.
Select
The selection, drawn as one shape
Drag across the text. The overlay follows the glyphs instead of the browser's line boxes, can snap to whole words, and turns into a coloured mark you can store as a character range.
Down the Rabbit-Hole
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”
So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
A mark is a character range of the source text, so it can be stored and redrawn later, at any zoom or width.
Any text
The same motion on HTML
domSource reads text nodes under an element, inline markup included, and re-measures when the text reflows.
How the cursor moves
Along a line the cursor stretches toward the next word and then contracts onto it. Between lines it travels with the same motion, so going down a line reads like moving along it.
- A sentence is one rounded shape, even across lines.
- Justified line ends are snapped, so the edge stays straight.
Drag the corner of this box to change its width while it reads.
Accuracy
Why the boxes land on the letters
pdf.js's text layer is set in a substitute font stretched to each span, so boxes measured on it drift inside a line. glyphline walks the page's glyph stream with the real font widths. Switch methods and zoom in.
Each text item's width split evenly over its characters: exact at item edges, drifting inside a line.
On the bundled 19-page stress document the median horizontal edge error is under 0.01 px on every page. How it is measured.
Usage
One overlay over your text
import { GlyphOverlay, useDomSource } from "glyphline/react";import "glyphline/style.css";export function Article({ sentence, word }) { const [ref, source] = useDomSource(); return ( <div style={{ position: "relative" }}> <article ref={ref}>…</article> <GlyphOverlay source={source} sentence={sentence} word={word} /> </div> );}Each framework has its own section, React and Svelte, and the playground exposes every timing and shape option.
For humans and agents
Docs you can read, docs your agent can load
For humans
Live demos on every page, a playground for every option, and separate React and Svelte sections.
For agents
llms.txt, llms-full.txt, Markdown for every page, and AGENTS.md inside the npm package with the rules that are easy to get wrong. How to point your agent at them.