<!DOCTYPE HTML>
<meta charset="utf8">
<style>
.testTextRun {
font-size: 50px;
}
#highlightContainer text {
font-size: 10px;
}
</style>
<svg width="600px" height="500px" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="path" d="M 25 400 C 300 400 200 200 500 450"/>
</defs>
<g id="highlightContainer"/>
<text x="25" y="50" class="testTextRun" font-family="cursive">öh у̌eah! fi ffi abcffidef</text>
<text x="25" y="150" class="testTextRun" font-family="serif">öh у̌eah! fi ffi abcffidef</text>
<text x="25" y="250" class="testTextRun" font-family="sans-serif">öh у̌eah! fi ffi abcffidef</text>
<use xlink:href="#path" stroke-width="2" stroke="black" fill="transparent"/>
<text x="25" y="350" class="testTextRun" font-family="cursive">
<textPath xlink:href="#path">ffiffiffiffiffiffiffiffiffiffiffi</textPath>
</text>
</svg>
<script src="resources/highlightGlyphs.js"></script>
<script>
highlightGlyphs(document.querySelectorAll('.testTextRun'), highlightContainer);
</script>