35 lines
1.8 KiB
XML
35 lines
1.8 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<svg width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg">
|
|
<g font-family="Arial" font-size="18">
|
|
<text x="10" y="50"><tspan direction="ltr" unicode-bidi="bidi-override">نشاط التدويل، W3C</tspan></text>
|
|
<text x="10" y="80"><tspan direction="ltr" unicode-bidi="normal">نشاط التدويل، W3C</tspan></text>
|
|
<g id="container"/>
|
|
|
|
<script type="text/javascript">
|
|
function highlightText(text, start, length, color) {
|
|
var startExtent = text.getExtentOfChar(start);
|
|
var endExtent = text.getExtentOfChar(start + length);
|
|
|
|
// Highlight rect that we've selected using the extent information
|
|
var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "svg:rect");
|
|
rectElement.setAttribute("x", startExtent.x);
|
|
rectElement.setAttribute("y", endExtent.y);
|
|
rectElement.setAttribute("width", endExtent.x + endExtent.width - startExtent.x);
|
|
rectElement.setAttribute("height", endExtent.height);
|
|
rectElement.setAttribute("fill-opacity", "0.4");
|
|
rectElement.setAttribute("fill", color);
|
|
document.getElementById("container").appendChild(rectElement);
|
|
}
|
|
|
|
// Highlight arabic text by an half-opaque rect rectangle and latin text by a green one.
|
|
var text1 = document.getElementsByTagName("text")[0];
|
|
highlightText(text1, 0, text1.getNumberOfChars() - 5, "red");
|
|
highlightText(text1, text1.getNumberOfChars() - 3, 2, "green");
|
|
|
|
var text2 = document.getElementsByTagName("text")[1];
|
|
highlightText(text2, 0, text2.getNumberOfChars() - 5, "red");
|
|
highlightText(text2, text2.getNumberOfChars() - 3, 2, "green");
|
|
</script>
|
|
</g>
|
|
</svg>
|