Question

I’m trying to wrap text by building up a text string, and using getComputedTextLength to find out when the text goes beyond the allowed width. However, I can’t find a simple way to incrementally build up the text which will work with getComputedTextLength.

The general idea is:

  str = svgDocument.createTextNode(myText[word]); // first word on new line
  word++;
  obj = text.cloneNode(true);                     // new text element for this line
  obj.appendChild(str);
  svgDocument.documentElement.appendChild(obj);   // reqd for getComputedTextLength?
  for( ; word < myText.length; word++) {
     next_width = obj.getComputedTextLength();    // get current line width
     if(next_width >= extent)
        break;
     str += " ";                                  // add next word to the line
     str += myText[word];
     ...
  }

Can anyone tell me how to get this to work? Presumably str is copied rather than referenced in obj, but I’ve also tried putting obj.removeChild(str) and obj.appendChild(str) in the loop, but the appendChild crashes. I’ve also tried various combinations of moving around the documentElement.appendChild, and removing obj and re-appending it, and so on.

Answer 1

This should work:

    var svgNS = "http://www.w3.org/2000/svg";
    var width = 200;

    function init(evt)
    {
        if ( window.svgDocument == null ) {
            svgDocument = evt.target.ownerDocument;
        }
        create_multiline("Whatever text you want here.");
    }

    function create_multiline(text) {
        var words = text.split(' ');                        
        var text_element = svgDocument.getElementById('multiline-text');
        var tspan_element = document.createElementNS(svgNS, "tspan");   // Create first tspan element
        var text_node = svgDocument.createTextNode(words[0]);           // Create text in tspan element

        tspan_element.appendChild(text_node);                           // Add tspan element to DOM
        text_element.appendChild(tspan_element);                        // Add text to tspan element

        for(var i=1; i<words.length; i++)
        {
            var len = tspan_element.firstChild.data.length;             // Find number of letters in string
            tspan_element.firstChild.data += " " + words[i];            // Add next word

            if (tspan_element.getComputedTextLength() > width)
            {
                tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);    // Remove added word

                var tspan_element = document.createElementNS(svgNS, "tspan");       // Create new tspan element
                tspan_element.setAttributeNS(null, "x", 10);
                tspan_element.setAttributeNS(null, "dy", 18);
                text_node = svgDocument.createTextNode(words[i]);
                tspan_element.appendChild(text_node);
                text_element.appendChild(tspan_element);
            }
        }


    }
]]>
</script>

<text x="10" y="50" id="multiline-text"> </text>

It works by adding tspan elements to the text element and then adding text to each of them.

The result is something like:

<text>
  <tspan>Whatever text</tspan>
  <tspan>you want here.</tspan>
</text>

In order for getComputerTextLength to work, you need to create the tspan (or text) element first and make sure it is in DOM. Also note that in order to add text to a tspan element, you need to use createTextNode() and append the result.