1

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.

Morinar
  • 3,460
  • 8
  • 40
  • 58
  • I don't really understand your problem. Why not just set your font size in "pixels" (which will become arbitrary units in the space of your SVG), and then set the size of your SVG image? – Marcin Mar 28 '11 at 17:36
  • As you can see above, the font size is being set in pixels. And I am setting the size of the image. What part don't you understand? The text area gets too big when there is lots of text in it and runs over the image on the right. This also not the only place in this form that it happens, just an example. – Morinar Mar 28 '11 at 18:05
  • What I don't understand is what your problem is, because your question is confusingly written. I'm guilty of badly written questions also, but the price to pay is fewer, and less useful, answers. – Marcin Mar 28 '11 at 19:08
  • Can you tell me what part you don't understand? Or what part is confusing? The question seems pretty clear to me if you are familiar with the technologies I mentioned. If you can be specific in ways I can improve the question, that would certainly be preferred over you just downvoting my question and telling me it's "confusingly written." – Morinar Mar 28 '11 at 20:11
  • What's confusing is your use of language - I can't tell if you are referring to more than one thing using multiple names, or no. It's everything about your writing - long sentences, unclear use of terminology, partial examples, unstructured. And the reason I downvoted your question is your response to me. Bottom line - take my criticism or not, I don't care. If you really want to apply the same criticisms to my writing, it won't offend me, because as I say, I've paid the same penalty for asking lazy questions. – Marcin Mar 28 '11 at 20:34
  • 1
    That's the thing, I'm more than happy to take your criticism, I just don't understand it. I was not at all lazy in the writing of that question, I read over it multiple times in the hope of making it more clear. Sometimes, it's just hard to accurately describe what you are trying to accomplish. And despite all of this back and forth, you have yet to tell me a single concrete thing I can do to make this question better or even ask a single clarification question. If you can't/won't be helpful, then don't even comment. – Morinar Mar 28 '11 at 20:42
  • @Morinar I think Marcin has some point, if not conveyed in a way that helped you. Some of your details, including the leading and trailing ones, are irrelevant (XSL-FO, PDF, style information produced by Inkscape). I think this question could be made more clear by stating ≈ _"I have arbitrary text that I need to fit in a fixed width region of an SVG document, ideally by changing the font size to fit. It will be rendered offline…. I've looked at `flowRegions`, …"_. The main problem, in my mind, is that the actual question is buried in the middle of a paragraph in the middle of your post. – Phrogz Mar 29 '11 at 03:17
  • @Morinar If you have a question that simply requires a lot of background information, I personally have had good success by leading with a summarized question, and then getting into the background. For example, [this question](http://stackoverflow.com/questions/5149301/baking-transforms-into-svg-path-element-commands) or [this one](http://diy.stackexchange.com/questions/5033/diy-easy-and-accurate-small-scale-landscape-survey). – Phrogz Mar 29 '11 at 03:21
  • @Phrogz That's some great advice all the way around. Thanks for helping me improve my questions. – Morinar Mar 29 '11 at 22:18

1 Answers1

2

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.

Community
  • 1
  • 1
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • Great idea! Unfortunately I'm not referencing this SVG inside of a web browser as I mentioned in question, but I still think I may be able to get that to work. It at least gives me a direction to go down. – Morinar Mar 28 '11 at 20:16
  • That definitely works, although I think not knowing the width of the text may be a deal breaker. I can't think of any way to calculate that and have it get all the way through to the SVG in the stylesheet. I could theoretically calculate it (or estimate it at least) and put it in the pre-transformed XML, but that doesn't seem like it'd be good enough... or would it? Actually, I may be able to pass that through as another XML tag and then fill in the attribute of the viewbox from that other tag. Hmm.... – Morinar Mar 28 '11 at 21:27
  • I ended up working around this problem by altering my layout a bunch, but I still feel like this is the best solution. Accepting it as such. – Morinar Mar 29 '11 at 22:39
  • I'm wrestling with the same issue so, for anyone else who finds this question; perhaps you can use the getComputedTextLength method of the text element to get the length of the text you need to display. – Paul Whipp Oct 08 '12 at 03:49
  • This doesn't resize the text if it's smaller or bigger than the text given. I tried it with this: http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst – SSH This Dec 31 '12 at 20:05