fitting text into the box

Question

on my website i allow users to create pictures with line of text they specify drawn on the picture

currently i use for that imagemagick convert - i specify svg template and let convert do the rest

here is part of code which is responsible for outputting text in the picture

  <text text-anchor="middle" x="50%%" y="%s"
        font-family="Times New Roman" font-size="55"
        style="fill:rgb(255,255,255);">
    %s
  </text>

my problem is that if user provides very long strings, the text doesn't fit in the image.

i'd like text to be resized automatically to smaller font if it doesn't fit the picture. is it possible to do with svg templates? if not, what could be other solutions

Answer 1

You could add a script within the SVG template which called when the SVG is loaded and uses getComputedTextLength() to resize the font. It's a bit of a hacky solution, but it seems to work.

Here's a quick example that draws a box and some text inside it. The text should be resized to always fit in the box no matter how long it is (up to point at least):

To call the code when the SVG is loaded include onload="int(evt)" in the SVG tag.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!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="400" height="80"
     onload="init(evt)"> 

Then the actual script:

  <script type="text/ecmascript">
    <![CDATA[
    
    function init(evt)
    {
        if ( window.svgDocument == null )
        {
            svgDocument = evt.target.ownerDocument;
        }

        maximum_length = 300;
        my_text = svgDocument.getElementById('text-to-resize');

        for (var font_size=55; font_size>0; font_size--)
        {
            if(my_text.getComputedTextLength() < maximum_length){break;}
            my_text.setAttributeNS(null, "font-size", font_size);
        }

    }
    
    ]]>
  </script>

I just used a for loop to decrement the font-size until the text length is less than the maximum specified; I'm sure there's a better way to resize the text.

Finally the actual text and box:

<rect id="rect1" x="20" y="10" width="320" height="50" fill="white" stroke="black"/>
<text id="text-to-resize"
      text-anchor="middle"
      x="170" y="50"
      font-family="Times New Roman" font-size="55">
 whatever text
</text>
</svg>

If you change the text, the font-size should change so that it fits inside the box. You'll probably want to change the x- and y- values to correctly centre the text too.