SVG being a tad special

I am pleased to say the work on fonts and SVG has, well, worked. FreeType just worked, and I was able to have a string of Google Noto fonts as backup for missing characters, so emojis, runes, Polish accents, all just worked. Even my new Farrington 7B font. Yay!

This is an update to A&A card printing.

But one aspect really fooled me.

In SVG you can have a text object, and that can be stand alone with the text as the content and attributes like font-family and font-size.

But you can include within it tspan objects. The advantage is that this allows different attributes for some text in-line.

For example changing to an Emoji font part way through, or some other font, or italic, etc, etc.

So far so good.

Then we come to the textLength attribute on text and tspan. This is meant to tell the application the calculated length of the text. As I now have FreeType working that out, and setting lower when I want to squash text, I have the figure to use. I added to the text element, and, err, nothing (when using tspan within text).

So... let's add to the tspan elements. I did this, and obviously I set the textLength on each tspan as the calculated length of that tspan.

It seems I am wrong. I do need to put the textLength on the tspan elements, but they have to be the total text calculated length not the length of the tspan!!!!

Update: For browsers I need textLength on tspan, but for inkscape (which makes the actual images for the card printing) I need textLength on the text object, so setting both!

Me no understand!

P.S. Everything but Safari struggles with a large value for font-size even when in a scaled SVG, showing things short (but stretched to textLength) and different if rotated! I may have to tinker with that at some point to work around. I am sure the SVG is fine!

P.P.S. I embedded fonts in the SVG for use as above, but even though that works in safari (and other browsers), it does not in inkscape. Shame.

P.P.P.S. This is what it looks like now.



P.P.P.P.S. I now have myself a nice svg/font library to do text objects, squashed, wrapped, justified, aligned, all sorts, based on system fonts using the fontconfig library to find system fonts and the freetype library to extract metrics. Works a treat and already deployed in four different systems we have using SVG (e.g. business cards if names are too long, etc).