third_party/WebKit/LayoutTests/svg/text/bidi-text-query.svg

   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">
   3 <g font-family="Arial" font-size="18">
   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>
   6     <text x="10" y="110" text-anchor="end" direction="rtl">W3C <tspan>نشاط التدويل،</tspan></text>
   7     <g id="container"/>
   8
   9     <script type="text/javascript"><![CDATA[
  10         function highlightGlyph(text, index, color) {
  11             var extent = text.getExtentOfChar(index);
  12
  13             // Highlight rect that we've selected using the extent information
  14             var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  15             rectElement.setAttribute("x", extent.x);
  16             rectElement.setAttribute("y", extent.y);
  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/svg", "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", "violet"];
  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>