annotate text in SVG documents #9990
Description
annotating text in SVG documents
is currently not possible with the hypothesis browser extension
challenge: visualize annotated text parts in SVG
to make this consistent with annotations in HTML
we would have to add a hypothesis-highlight rectangle
behind the SVG text element
challenge: handle annotations
not aligning with SVG text element boundaries
challenge: handle darkmode
(prefers-color-scheme, darkreader, ...)
use case:
hocr2epubfxl - EPUB-FXL ebooks based on SVG
example book: the preparation: hocr → epub
test.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 200 50"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns">
>
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<!-- canonical URL -->
<!-- <html><head><link rel="canonical" href="https://milahu.github.io/hypothesis-annotations-svg-text/test.svg"/> -->
<dc:identifier>https://milahu.github.io/hypothesis-annotations-svg-text/test.svg</dc:identifier>
<dc:source>https://milahu.github.io/hypothesis-annotations-svg-text/test.svg</dc:source>
</cc:Work>
</rdf:RDF>
</metadata>
<g fill="#000000" font-family="sans-serif" transform="translate(0 10)">
<text x="10" y="10">some annotated text</text>
</g>
</svg>solutions.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns">
>
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<!-- canonical URL -->
<!-- <html><head><link rel="canonical" href="https://milahu.github.io/hypothesis-annotations-svg-text/solutions.svg"/> -->
<dc:identifier>https://milahu.github.io/hypothesis-annotations-svg-text/solutions.svg</dc:identifier>
<dc:source>https://milahu.github.io/hypothesis-annotations-svg-text/solutions.svg</dc:source>
</cc:Work>
</rdf:RDF>
</metadata>
<defs>
<filter id="text-bg" x="0" y="0" width="1" height="1">
<feFlood flood-color="yellow"/>
<feComposite in2="SourceGraphic" operator="over"/>
</filter>
</defs>
<g fill="#000000" font-family="sans-serif" transform="translate(0 10)">
<text x="10" y="10">some annotated text</text>
<!-- NOTE rect must be outside of the text element -->
<rect id="rect12345" class="hypothesis-highlight" x="0" y="0" fill="yellow" />
<text x="10" y="30">
<tspan>some</tspan>
<a class="hypothesis-highlight" href="javascript:alert('todo show annotation')">
<tspan id="tspan12345">annotated</tspan>
<script>
var r = document.getElementById("rect12345");
var t = document.getElementById("tspan12345").getBBox();
var d = 0; // overfill
console.log("r", r);
console.log("t", t);
r.setAttribute('x', t.x - 2*d);
r.setAttribute('y', t.y - 1*d);
r.setAttribute('width', t.width + 2*d);
r.setAttribute('height', t.height + 1*d);
</script>
</a>
<tspan>text</tspan>
</text>
<g transform="translate(10 50)">
<text x="0" y="0">some</text>
<a class="hypothesis-highlight" href="javascript:alert('todo show annotation')">
<rect id="rect123456" class="hypothesis-highlight" x="0" y="0" fill="yellow"/>
<!-- FIXME moving the annotated word to a separate text element
- introduces linebreaks between words
- break text search across word boundaries. example: search for "some annotated"
some
annotated
text
-->
<text id="text123456" x="45" y="0">annotated</text>
<script>
var r = document.getElementById("rect123456");
var t = document.getElementById("text123456").getBBox();
var d = 0; // overfill
console.log("r", r);
console.log("t", t);
r.setAttribute('x', t.x - 2*d);
r.setAttribute('y', t.y - 1*d);
r.setAttribute('width', t.width + 2*d);
r.setAttribute('height', t.height + 1*d);
</script>
</a>
<text x="120" y="0">text</text>
</g>
<text x="10" y="70">
<tspan>some</tspan>
<a class="hypothesis-highlight" href="javascript:alert('todo show annotation')">
<!-- FIXME this hides some text -->
<!-- FIXME this fills the whole text element, not just the tspan element -->
<tspan id="tspan12345" filter="url(#text-bg)">annotated</tspan>
</a>
<tspan>text</tspan>
</text>
</g>
</svg>