OLD | NEW |
1 <?xml version="1.0" encoding="utf-8"?> | 1 <?xml version="1.0" encoding="utf-8"?> |
2 <svg width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/
2000/svg"> | 2 <svg width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/
2000/svg"> |
3 <g font-family="Arial" font-size="18"> | 3 <g font-family="Arial" font-size="18"> |
4 <text x="10" y="50"><tspan direction="ltr" unicode-bidi="bidi-override">نشاط
التدويل، W3C</tspan></text> | 4 <text x="10" y="50"><tspan direction="ltr" unicode-bidi="bidi-override">نشاط
التدويل، W3C</tspan></text> |
5 <text x="10" y="80"><tspan direction="ltr" unicode-bidi="normal">نشاط التدوي
ل، W3C</tspan></text> | 5 <text x="10" y="80"><tspan direction="ltr" unicode-bidi="normal">نشاط التدوي
ل، W3C</tspan></text> |
6 <g id="container"/> | 6 <g id="container"/> |
7 | 7 |
8 <script type="text/javascript"> | 8 <script type="text/javascript"><![CDATA[ |
9 function highlightText(text, start, length, color) { | 9 function highlightGlyph(text, index, color) { |
10 var startExtent = text.getExtentOfChar(start); | 10 var extent = text.getExtentOfChar(index); |
11 var endExtent = text.getExtentOfChar(start + length); | |
12 | 11 |
13 // Highlight rect that we've selected using the extent information | 12 // Highlight rect that we've selected using the extent information |
14 var rectElement = document.createElementNS("http://www.w3.org/2000/s
vg", "svg:rect"); | 13 var rectElement = document.createElementNS("http://www.w3.org/2000/s
vg", "rect"); |
15 rectElement.setAttribute("x", startExtent.x); | 14 rectElement.setAttribute("x", extent.x); |
16 rectElement.setAttribute("y", endExtent.y); | 15 rectElement.setAttribute("y", extent.y); |
17 rectElement.setAttribute("width", endExtent.x + endExtent.width - st
artExtent.x); | 16 rectElement.setAttribute("width", extent.width); |
18 rectElement.setAttribute("height", endExtent.height); | 17 rectElement.setAttribute("height", extent.height); |
19 rectElement.setAttribute("fill-opacity", "0.4"); | 18 rectElement.setAttribute("fill-opacity", "0.4"); |
20 rectElement.setAttribute("fill", color); | 19 rectElement.setAttribute("fill", color); |
21 document.getElementById("container").appendChild(rectElement); | 20 document.getElementById("container").appendChild(rectElement); |
| 21 // Output the start offset |
| 22 var textElement = document.createElementNS("http://www.w3.org/2000/s
vg", "text"); |
| 23 textElement.setAttribute("x", extent.x + extent.width / 2); |
| 24 textElement.setAttribute("y", extent.y + extent.height + 5); |
| 25 textElement.setAttribute("text-anchor", "middle"); |
| 26 textElement.setAttribute("font-size", 4); |
| 27 textElement.appendChild(document.createTextNode(index)); |
| 28 document.getElementById("container").appendChild(textElement); |
22 } | 29 } |
23 | 30 |
24 // Highlight arabic text by an half-opaque rect rectangle and latin text
by a green one. | 31 var colors = [ "red", "orange", "yellow", "green", "blue", "indigo", "vi
olet"]; |
25 var text1 = document.getElementsByTagName("text")[0]; | |
26 highlightText(text1, 0, text1.getNumberOfChars() - 5, "red"); | |
27 highlightText(text1, text1.getNumberOfChars() - 3, 2, "green"); | |
28 | 32 |
29 var text2 = document.getElementsByTagName("text")[1]; | 33 // Highlight each glyph with a semi-transparent rectangle and |
30 highlightText(text2, 0, text2.getNumberOfChars() - 5, "red"); | 34 // a number corresponding to the queried character index. |
31 highlightText(text2, text2.getNumberOfChars() - 3, 2, "green"); | 35 var textElements = document.querySelectorAll("text"); |
32 </script> | 36 for (var elemNum = 0; elemNum < textElements.length; ++elemNum) { |
| 37 var text = textElements[elemNum]; |
| 38 var charCount = text.getNumberOfChars(); |
| 39 for (var index = 0; index < charCount; ++index) |
| 40 highlightGlyph(text, index, colors[index % colors.length]); |
| 41 } |
| 42 ]]></script> |
33 </g> | 43 </g> |
34 </svg> | 44 </svg> |
OLD | NEW |