Getting started

InstallCopy Anchor Link

bun add glyphline

For PDF pages add pdfjs-dist. The React and Svelte adapters are in the same package, glyphline/react and glyphline/svelte; each has its own section with complete examples: React, Svelte.

Put an overlay over the textCopy Anchor Link

The overlay is an <svg> inside a positioned element that wraps the text. The gl-overlay class from glyphline/style.css stretches it over its parent and sets the colours.

<div style="position: relative">
  <article id="text">…</article>
  <svg class="gl-overlay"></svg>
</div>

For a PDF page, the wrapper is the page element that holds the canvas and the text layer.

Build a text sourceCopy Anchor Link

A source is the text, its words and sentences, and a way to measure any character range. In React and Svelte the hooks below (useDomSource, domText) do this step for you.

import { domSource } from "glyphline/dom";

const source = domSource(document.getElementById("text")!);

HighlightCopy Anchor Link

import { GlyphOverlay, useDomSource } from "glyphline/react";
import "glyphline/style.css";

const [ref, source] = useDomSource<HTMLElement>();

<div style={{ position: "relative" }}>
  <article ref={ref}>…</article>
  <GlyphOverlay source={source} sentence={sentence} word={word} />
</div>;

A target can also be a character range, { start, end }, for anything that is not a whole word or sentence.