generated from coulomb/repo-seed
Load pdfjs-dist's own pdf_viewer.css so text-layer spans position correctly
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(<base> * 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 <noreply@anthropic.com>
This commit is contained in:
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user