Core API

The core, glyphline. The framework packages wrap it: React API, Svelte API.

createHighlighterCopy Anchor Link

function createHighlighter(svg: SVGSVGElement, source: TextSource, options?: HighlighterOptions): Highlighter;

Adds its paths to svg, sets its viewBox from the source and returns:

HighlightStateCopy Anchor Link

HighlighterOptionsCopy Anchor Link

TextSourceCopy Anchor Link

Anything that can be highlighted. domSource and pdfSource return one; you can write your own (a canvas editor, a custom renderer).

interface TextSource {
  text: string;
  words: Word[]; // { index, start, end, text, sentence }
  sentences: Sentence[]; // { index, start, end, text, firstWord, lastWord }
  boxes(start: number, end: number, overlay: Element): Box[]; // one per line fragment
  viewBox(overlay: Element): Box;
  live?: boolean; // re-measure on overlay resize
  rangeFromSelection?(selection: Selection | null): TextRange | null;
}

segment(text, { breakAt, locale }) gives you words and sentences for your own text.

domSourceCopy Anchor Link

function domSource(root: Element, options?: { locale?: string; skip?: string }): DomTextSource;

Adds root, rangeFromSelection(selection), charAtPoint(x, y) and toRange(start, end).

pdfSourceCopy Anchor Link

function pdfSource(page: PDFPageProxy, options: { OPS: Record<string, number>; locale?: string }): Promise<PdfTextSource>;

Adds page, pageText, width and height (the page at scale 1), geometry (per-character boxes and which method placed each item), fallbackItems, methods (each method's raw boxes), withTextLayer(textDivs, container, scale) and rangeFromSelection(selection).

HelpersCopy Anchor Link