-
-
Notifications
You must be signed in to change notification settings - Fork 165
Open
Description
Test Example: https://jsfiddle.net/9mo8j67g/1/
Part of text node is wrapped with <span>, and NodeFilter.FILTER_SKIP is used to skip that <span>.
The generated epubcfi should be the same.
full test script
<!-- Test Case 1 -->
<p id="test-1">Hello, World</p>
<div id="result-1"></div>
<!-- Test Case 2 -->
<p id="test-2"><span class="SKIP">H</span>e<span class="SKIP">ll</span>o, World</p>
<div id="result-2"></div>
<script type="module">
import * as epubcfi from "https://cdn.jsdelivr.net/gh/johnfactotum/foliate-js/epubcfi.js"
function myFilter(node) {
return node.classList?.contains("SKIP")
? NodeFilter.FILTER_SKIP
: NodeFilter.FILTER_ACCEPT
}
window.find("lo, W")
var range1 = window.getSelection().getRangeAt(0)
var result1 = epubcfi.fromRange(range1, myFilter)
document.querySelector("#result-1").innerHTML = " > " + result1
window.find("lo, W")
var range2 = window.getSelection().getRangeAt(0)
var result2 = epubcfi.fromRange(range2, myFilter)
document.querySelector("#result-2").innerHTML = " > " + result2
CSS.highlights.set("my-underline", new Highlight(range1, range2))
</script>
<style>
.SKIP {
color: red;
}
::highlight(my-underline) {
text-decoration: underline;
}
</style>Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels