From 8082aaf7ec0202cac3ba91a2f830230996954371 Mon Sep 17 00:00:00 2001 From: tegwick Date: Wed, 27 May 2026 01:34:03 +0200 Subject: [PATCH] Load pdfjs-dist's own pdf_viewer.css so text-layer spans position correctly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The version of pdf_viewer.css bundled with react-pdf-highlighter-plus is only a minimal *override* (≈40 lines: opacity, z-index, blend mode). It's missing the foundational rules that PDF.js's TextLayer relies on — `position: absolute`, `inset: 0`, and the entire `--scale-factor` CSS-variable machinery that PDF.js 4.x uses to position each glyph. Without those rules, each text-layer span gets rendered with default positioning context and `font-size: calc( * var(--scale-factor))` collapses to 0 → spans either pile up at the top-left of the page or land at wrong y-coordinates regardless of where the glyph actually sits on the canvas. The reported symptom ("origin seems to be the top of the page always") matches exactly. Importing `pdfjs-dist/web/pdf_viewer.css` first, then the library's overrides on top, gives PDF.js the CSS it expects. Co-Authored-By: Claude Opus 4.7 --- src/anchor/pdf-viewer-adapter-spike.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/anchor/pdf-viewer-adapter-spike.tsx b/src/anchor/pdf-viewer-adapter-spike.tsx index f722e46..38cbc61 100644 --- a/src/anchor/pdf-viewer-adapter-spike.tsx +++ b/src/anchor/pdf-viewer-adapter-spike.tsx @@ -26,6 +26,13 @@ import { type PdfSelection, type ScaledPosition, } from "react-pdf-highlighter-plus"; +// pdfjs-dist's own pdf_viewer.css is the authoritative source for +// text-layer positioning. The version bundled with +// react-pdf-highlighter-plus is a minimal *override* (missing +// `position: absolute`, `inset: 0`, and PDF.js 4.x's +// `--scale-factor` handling) — load the real one first, then the +// library's overrides on top. +import "pdfjs-dist/web/pdf_viewer.css"; import "react-pdf-highlighter-plus/style/style.css"; import "react-pdf-highlighter-plus/style/pdf_viewer.css"; import "./highlight-styles.css";