-
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