Question

I’ve got an SVG element that I’ve created with Inkscape. I then take that SVG and put in as part of an XSL-FO stylesheet that is used to transform XML data and then passed through the IBEX renderer to create a pdf (which is usually then printed). As an example, I have elements in the svg/stylesheet that look like this (extra noise due to the Inkscape export):

<text x="114" x="278.36218" id="id1" xml:space="preserve" style="big-long-style-string-from-inkscape">
    <tspan x="114" y="278.36218" id="id2" style="style-string">
        <xsl:value-of select="Alias1"/>
    </tspan>
</text>

My problem lies in the fact that I don’t know how big this text area is going to be. For this particular one, I’ve got an image to the right of the text in the SVG. However, if this string is the maximum allowed number of W’s, it’s way too long and goes over the image. What I’d like (in a perfect world) is a way to tell it how many pixels wide I want the text block to be and then have it automatically make the text smaller until it fits in that area. If I can’t do that, truncating the text would also work. As a last ditch resort, I’m going to use a fixed width font and do the string truncation myself in the XML generation, although that creates something both less usable and less pretty.

I’ve poked around the SVG documentation and looked into flowRegions a bit as well as paths, but neither seem to be be quite what I want (maybe they are though). If it helps, here’s that style string that Inkscape generates:

"font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"

Thanks in advance for the help.

Answer 1

You have text of arbitrary line length (in terms of characters) and you want to scale it to fit inside a fixed amount of space? The only way I can think of to rescale text to a fixed size is to place it inside an svg element and then scale the SVG to that size:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Resizing Text</title>
  <defs>
    <svg id="text-1" viewBox="0 0 350 20">
      <text id="text-2" x="0" y="0" fill="#000" alignment-baseline="before-edge">It's the end of the world as we know it, and I feel fine!</text>
    </svg>
  </defs>
  <rect x="500" y="100" width="200" height="40" fill="#eee" />
  <use  x="510" y="110" width="180" height="20" xlink:href="#text-1" />
</svg>

However, as seen above, the viewBox on the encapsulating svg element needs to be set to the width of the text, which you presumably don’t know.

If you’re referencing this SVG inside a user agent with scripting available (e.g. a web browser) then you could easily write a script to capture the width of the text or tspan element and set the viewBox accordingly.