[hold] Document view #5: Improve text overlay alignment for PageViewer selection accuracy#610
Draft
[hold] Document view #5: Improve text overlay alignment for PageViewer selection accuracy#610
Conversation
hoyla
force-pushed
the
ljh-pageviewer-ux-3
branch
from
0270c65 to
3a53c7f
Compare
hoyla
changed the title
3 tasks
hoyla
force-pushed
the
ljh-pageviewer-ux-3
branch
from
e47d25b to
fa1e491
Compare
Add line-height: 1 and white-space: pre to .pfi-page__pdf-text to prevent browser defaults from distorting the invisible text overlay geometry. The default line-height (~1.2) adds extra vertical space above/below each text div, causing the selectable area to be taller than the actual glyph. white-space: pre prevents the browser from collapsing whitespace or wrapping text, keeping positions aligned with where PDF.js placed them.
When a highlight has multiple spans (e.g. multi-line highlights), each span was receiving the same id and key. Duplicate DOM ids are invalid HTML and duplicate React keys defeat reconciliation. Append the span index to make both unique.
The opacity property is not supported in ::selection pseudo-elements and was silently ignored by all browsers. Remove it along with the now-unnecessary comment explaining the workaround.
textContent is the correct API for extracting plain text from DOM elements. innerHTML could return markup if PDF.js ever added internal elements to the text divs, while textContent always returns the raw text content.
hoyla
force-pushed
the
ljh-pageviewer-ux-3
branch
from
fa1e491 to
58817f1
Compare
hoyla
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This is an attempt to address the way text selection in the PageViewer is often misaligned vertically. A little robot tells me that the browser was adding default padding vertically, affecting selection. This removes that.
This doesn't fix the much more serious problem of text selection and highlighting being misaligned in terms of character counts down the page. But it does at least get the user onto the right line.
Add
line-height: 1andwhite-space: preto .pfi-page__pdf-text to prevent browser defaults from distorting the invisible text overlay geometry.line-height(~1.2) added extra vertical space above/below each text div, causing the selectable area to be taller than the actual glyph; and on pages with lots of lines eventually shifts the selection and highlight to below the text.white-space: preprevents the browser from collapsing whitespace or wrapping text, keeping positions aligned with where PDF.js placed them. Allegedly.Before:
To select "workspaces section" the user actually has to drag the cursor across what appears to be the line below to get the selection right. The highlight itself is also too tall, although this actually helps since it overlaps the text, unlike the required cursor action.
After:
Cursor drag (and the highlight itself) aligns more accurately to the displayed text.
Testing: