generated from coulomb/repo-seed
tegwick
0638c441c4
PDF text selection misbehaviour (some glyphs unselectable, selections
jumping to other positions) is almost always caused by misalignment
between the visible canvas-rendered glyphs and the invisible text
layer that PDF.js overlays for selection. There's no way to see this
without devtools — which makes it hard for end users to tell whether
a specific PDF is OCR-noisy, has bad font fallbacks, or has no text
layer at all.
This adds a developer-facing toggle in the SessionMenu ("Debug text
layer") that:
- paints every text-layer span yellow with a blue outline so it's
obvious where text is selectable and where it isn't, and
- logs every onSelection event to the browser console with the
captured text, page, normalized rects, and the selectors the
pipeline derived from it.
Preference persists in localStorage under
`citation-evidence:debug:textLayer`. Surfaced via a new
`useDebugFlag()` hook in @work so the SessionMenu (app layer) and the
ViewerShell (work layer) can both subscribe without breaching the
boundary plugin.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
25 lines
849 B
CSS
25 lines
849 B
CSS
/*
|
|
* Debug overlay for PDF text layer alignment.
|
|
*
|
|
* The text layer is normally invisible (`opacity: 0`) and selectable.
|
|
* When `.ce-debug-textlayer` is on a parent, every text span becomes a
|
|
* yellow highlight so it's obvious where text is selectable and where it
|
|
* isn't — useful for diagnosing OCR misalignment, scan-only PDFs, and
|
|
* text-layer shift caused by font fallbacks.
|
|
*
|
|
* Toggle via the "Debug text layer" entry in SessionMenu.
|
|
*/
|
|
|
|
.ce-debug-textlayer .textLayer {
|
|
outline: 1px dashed rgba(255, 0, 0, 0.5);
|
|
}
|
|
|
|
.ce-debug-textlayer .textLayer > span,
|
|
.ce-debug-textlayer .textLayer > br {
|
|
background: rgba(255, 220, 0, 0.35) !important;
|
|
color: rgba(0, 0, 100, 0.85) !important;
|
|
opacity: 1 !important;
|
|
/* Reveal the per-glyph span borders so misalignment is visible. */
|
|
outline: 1px solid rgba(0, 100, 255, 0.25);
|
|
}
|