Loading ...
Sorry, an error occurred while loading the content.

Heteogeneous implementation of getComputedTextLength

Expand Messages
  • simonshutter
    Thanks to those who replied to my post about textArea. In the meantime I am using the carto.net textFlow script to implement flowing text. While running some
    Message 1 of 1 , May 1, 2009
    • 0 Attachment
      Thanks to those who replied to my post about textArea. In the meantime I am using the carto.net textFlow script to implement flowing text. While running some tests I noticed inconsistencies between and within browsers and I hope that someone can explain the differences.

      Consider the svg below. It renders two identical tspan elements inside a text element and then reports the computed width of each tspan.

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
      viewBox="0 0 1000 700" onload="window.setTimeout('calculateTspanWidths()',100)">

      <script type="text/ecmascript">
      <![CDATA[
      function calculateTspanWidths() {
      var root = document.getElementById('textroot');
      var tspans = root.getElementsByTagName('tspan');
      var tspanWidth = 0;
      var elm;
      for (var i = 0, l = tspans.length;i < l;i++){
      elm = tspans.item(i);
      tspanWidth = elm.getComputedTextLength();
      alert('[' + elm.firstChild.nodeValue + '] : ' + tspanWidth);
      }
      }
      ]]>
      </script>

      <text id="textroot" x="55" y="65" font-size="10" font-family="Arial,Helvetica">
      <tspan x="55" dy="0">abcdefg hijk </tspan>
      <tspan x="55" dy="15">abcdefg hijk </tspan>
      </text>
      </svg>

      Opening this svg in various browsers I get the following results:

      Firefox (3.08)

      1 54.453...
      2 54.453...

      Opera (9.63)

      1 60
      2 57

      IE (ASV 3.03)

      1 56.147...
      2 53.369...

      Safari (3.2.2)

      1 0
      2 0

      Chrome (1.0)

      1 0
      2 0

      The question I have is why ASV and Opera calculate different text lengths even though both spans appear to be the same. Are they trimming white space from the last tspan in the group?

      Thanks
    Your message has been successfully submitted and would be delivered to recipients shortly.