• Robert Knight's avatar
    Improve readability of PDF highlights · 55e4ad5a
    Robert Knight authored
    Improve the readability of highlights on PDFs by creating the highlights
    in an SVG layer overlaid on top of the page's `<canvas>` instead of
    using the CSS `background-color` property on the
    `<hypothesis-highlight>` elements in the page's text layer.
    
    Using an SVG placed in the DOM like this allows us to control how
    the highlight is blended with the content underneath using CSS
    `mix-blend-mode`. Using the `multiply` blend mode [2] means that highlights
    will darken the content below rather than making dark text in the
    canvas appear lighter and muddier. Additionally this approach gives us
    more control over the appearance of overlapping highlights. Note that
    for the custom blending to work, it is important that the SVG is in the
    same stacking context as the canvas [1]
    
    We still need to keep the `<hypothesis-highlight>` elements in the text layer
    for interactive functionality (eg. interacting with highlights using the
    keyboard or pointer). The SVG highlight is associated with the
    `<hypothesis-highlight>` via an `svgHighlight` property so that the SVG
    can be removed when the highlight itself is removed.
    
    [1] https://drafts.fxtf.org/compositing-1/#csscompositingrules_CSS
    [2] https://drafts.fxtf.org/compositing-1/#valdef-blend-mode-multiply
    55e4ad5a
Name
Last commit
Last update
.github Loading commit data...
bin Loading commit data...
docs Loading commit data...
embedding-examples Loading commit data...
images Loading commit data...
scripts Loading commit data...
src Loading commit data...
.babelrc Loading commit data...
.dockerignore Loading commit data...
.eslintignore Loading commit data...
.eslintrc Loading commit data...
.gitignore Loading commit data...
.npmignore Loading commit data...
.npmrc Loading commit data...
.prettierignore Loading commit data...
.prettierrc Loading commit data...
.python-version Loading commit data...
.travis.yml Loading commit data...
CODE_OF_CONDUCT Loading commit data...
Dockerfile Loading commit data...
Jenkinsfile Loading commit data...
LICENSE Loading commit data...
Makefile Loading commit data...
README.md Loading commit data...
gulpfile.js Loading commit data...
package.json Loading commit data...
requirements-dev.in Loading commit data...
tox.ini Loading commit data...
yarn.lock Loading commit data...