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/2
000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
3 <g font-family="Arial" font-size="18"> | 3 <style> |
4 <text x="10" y="50"><tspan direction="ltr" unicode-bidi="bidi-override">نشاط
التدويل، W3C</tspan></text> | 4 .testTextRun { |
5 <text x="10" y="80"><tspan direction="ltr" unicode-bidi="normal">نشاط التدوي
ل، W3C</tspan></text> | 5 font-family: Arial; |
6 <text x="10" y="110" text-anchor="end" direction="rtl">W3C <tspan>نشاط التدو
يل،</tspan></text> | 6 font-size: 18px; |
7 <g id="container"/> | 7 } |
| 8 #highlightContainer rect { |
| 9 fill-opacity: 0.4; |
| 10 } |
| 11 #highlightContainer text { |
| 12 font-family: Arial; |
| 13 font-size: 4px; |
| 14 } |
| 15 </style> |
8 | 16 |
9 <script type="text/javascript"><![CDATA[ | 17 <text x="10" y="50" class="testTextRun"><tspan direction="ltr" unicode-bidi=
"bidi-override">نشاط التدويل، W3C</tspan></text> |
10 function highlightGlyph(text, index, color) { | 18 <text x="10" y="80" class="testTextRun"><tspan direction="ltr" unicode-bidi=
"normal">نشاط التدويل، W3C</tspan></text> |
11 var extent = text.getExtentOfChar(index); | 19 <text x="10" y="110" class="testTextRun" text-anchor="end" direction="rtl">W
3C <tspan>نشاط التدويل،</tspan></text> |
| 20 <g id="highlightContainer"/> |
12 | 21 |
13 // Highlight rect that we've selected using the extent information | 22 <script xlink:href="resources/highlightGlyphs.js"></script> |
14 var rectElement = document.createElementNS("http://www.w3.org/2000/s
vg", "rect"); | 23 <script> |
15 rectElement.setAttribute("x", extent.x); | 24 highlightGlyphs(document.querySelectorAll('.testTextRun'), document.getE
lementById('highlightContainer')); |
16 rectElement.setAttribute("y", extent.y); | 25 </script> |
17 rectElement.setAttribute("width", extent.width); | |
18 rectElement.setAttribute("height", extent.height); | |
19 rectElement.setAttribute("fill-opacity", "0.4"); | |
20 rectElement.setAttribute("fill", color); | |
21 document.getElementById("container").appendChild(rectElement); | |
22 // Output the start offset | |
23 var textElement = document.createElementNS("http://www.w3.org/2000/s
vg", "text"); | |
24 textElement.setAttribute("x", extent.x + extent.width / 2); | |
25 textElement.setAttribute("y", extent.y + extent.height + 5); | |
26 textElement.setAttribute("text-anchor", "middle"); | |
27 textElement.setAttribute("font-size", 4); | |
28 textElement.appendChild(document.createTextNode(index)); | |
29 document.getElementById("container").appendChild(textElement); | |
30 } | |
31 | |
32 var colors = [ "red", "orange", "yellow", "green", "blue", "indigo", "vi
olet"]; | |
33 | |
34 // Highlight each glyph with a semi-transparent rectangle and | |
35 // a number corresponding to the queried character index. | |
36 var textElements = document.querySelectorAll("text"); | |
37 for (var elemNum = 0; elemNum < textElements.length; ++elemNum) { | |
38 var text = textElements[elemNum]; | |
39 var charCount = text.getNumberOfChars(); | |
40 for (var index = 0; index < charCount; ++index) | |
41 highlightGlyph(text, index, colors[index % colors.length]); | |
42 } | |
43 ]]></script> | |
44 </g> | |
45 </svg> | 26 </svg> |
OLD | NEW |