• 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
highlights.scss 3.08 KB