• Robert Knight's avatar
    Improve text selection behavior in VitalSource PDFs · 00763a2d
    Robert Knight authored
    Previously the text layer in VitalSource PDFs consisted of a set of
    absolutely positioned elements, one per word. When the user was making a
    text selection and the cursor was between words, the browser could not
    determine an appropriate caret position in the text. As a result text
    selection was tricky.
    
    Improve this by re-implementing ImageTextLayer to produce a more
    structured DOM tree. Group the characters into words, lines and columns.
    Words are laid out using inline layout into `<hypothesis-text-line>`
    elements, which are then arranged using block layouts into
    `<hypothesis-text-column>` elements. Columns are absolutely positioned.
    Within lines and columns the gaps between words and lines are fine-tuned
    using margins. This use of inline and block layouts allows the browser
    to set the selection correctly when the cursor is between words or
    lines. The visual gap between selected words has also been eliminated by
    adding inter-word spaces to the previous word.
    
     - Separate page layout analysis from DOM construction. This makes these
       elements easier to understand and improve.
    
     - Change DOM structure generated by `ImageTextLayer` to a hierarchical
       structure of words, lines and columns.
    
     - Change ImageTextLayer to use DOMRect and DOMPoint as the types for
       rect and point structs. This allows sharing of geometry utilities
       with other code.
    
     - Simplify rescaling of text layer when image size changes by
       expressing all margins, sizes and scales in the text layer in terms
       of CSS variables (`--x-scale` and `--y-scale`) defined on the root
       `<hypothesis-text-layer>` element. When the image is resized, these
       variables are simply updated to reflect the new image size.
    00763a2d
Name
Last commit
Last update
..
annotator Loading commit data...
boot Loading commit data...
images/icons Loading commit data...
shared Loading commit data...
sidebar Loading commit data...
styles Loading commit data...
test-util Loading commit data...
types Loading commit data...
.eslintrc Loading commit data...
karma.config.js Loading commit data...
tsconfig.json Loading commit data...
tsconfig.no-any.json Loading commit data...