Text rending spaces (" ") in their own tspan when generating SVGs

[LucasReller]

There appears to be a behavior with certain strings that are being written to SVGs where the spaces in the string are occasionally wrriten to their own TSpan. For example:

Input string:
"No Data Available"

Text field in SVG:  
<text x="0" y="0" transform="matrix(1,0,0,1,180.50145446777344,113.98666920979818)" stroke="none" fill="#000000" fill-opacity="1" font-size="13.333333333333332" font-family="Arimo-#" font-weight="bold" font-style="normal"><tspan>No Data</tspan><tspan> </tspan><tspan dx="-0.49479166666666663">A</tspan><tspan dx="-0.49479166666666663">vailable</tspan></text>

This will result in the SVG displaying properly of course, but we are running into an issue later in our processing that is caused by the space only tspan in the middle. Is there any way to change how VectSharp renderers text elements to prevent this from happening?

[arklumpus]

Hi! Sorry, this turned out to be a longer post than I expected 😅

TLDR: this is because of kerning. I just pushed an update to VectSharp.SVG that will reduce the frequency of space-only tspans, but these will still occur in specific situations, unless you completely disable kerning. In any case, the best solution would be to fix the way you are processing the generated SVG.

The reason why text is split into multiple tspans is to enable kerning. In your string, you have two 'kerning pairs': and A, as well as A and v. In a kerning pair, both the first and second character may have their positions altered slightly to improve the readability of the text, thus each of these characters must be the first character of a tspan.

As a result, the text string gets split in multiple parts:

• No data: text before the first kerning pair.
• : first character of the first kerning pair.
• A: this is, at the same time, the text starting with the second character of the first kerning pair, the text before the second kerning pair, and the first character of the second kerning pair.
• vailable: the text starting with the second character of the second kerning pair.

This allows the position of the first element (No data) to be set by the overall position of the text object, while the position of the first character of each subsequent tspan element is set by the dx (and sometimes dy) properties.

In your specific example, the kerning pair A does not specify a displacement for the space, and thus the tspan object does not have a dx or dy property and could be merged with the previous tspan without altering the appearance of the text. I have added a postprocessing step that does this in version 1.10.0-a3 of VectSharp.SVG, which I just pushed.

However, this will not prevent single-space tspan objects in general. For example, if you try to write the text No Data A Available, a tspan containing a single space will still be generated:

<text x="0" y="0" transform="matrix(1,0,0,1,9.18,17.240000000000002)" stroke="none" fill="#000000"
fill-opacity="1" font-size="10" font-family="Arimo-856b4242-a851-4181-aa07-a55a4ced5f2e, sans-serif"
font-weight="regular" font-style="normal">
    <tspan>No Data </tspan><tspan dx="-0.5517578125">A</tspan><tspan dx="-0.5517578125"> </tspan>
    <tspan dx="-0.5517578125">A</tspan><tspan dx="-0.1806640625">vailable</tspan>
</text>

In this case, the separate tspan is necessary because the space also has a horizontal displacement, so it cannot be merged with the previous tspan.

The only way to avoid this is to completely disable kerning by setting the static field Font.EnableKerning = false before generating the SVG. This is a global setting, and it will apply to all calls to SaveAsSVG invoked after it is set. If you do this, tspan objects will not be generated, and all the text will be placed within a single text object:

<text x="0" y="0" transform="matrix(1,0,0,1,9.18,17.240000000000002)" stroke="none" fill="#000000"
fill-opacity="1" font-size="10" font-family="Arimo-0c69d126-6277-4ff0-88a7-5af7c5b2c819, sans-serif"
font-weight="regular" font-style="normal">No Data A Available</text>

And of course, this will also change the appearance of the text (blue is with kerning, red is without kerning):

In any case, I think the best solution would be to fix your post-processing so that it correctly handles the space-only tspans... What are you doing with the SVG exactly? Also, not sure if you're aware of that already, but VectSharp.SVG transforms all space ('\u0020') characters into non-breaking space characters   ('\u00A0'), in order to avoid issues with the space being trimmed off of the tspan elements.

[LucasReller]

Thank you for such a detailed response! This really helped me understand exactly what is going on. To answer what we are doing with the SVGs, there are a handful of pathways they go down after being generated but the one experiencing this issue is they are being passed to a service that handles importing them into a PDF document that is using a different library we have zero control over so we unfortunately have no way to update the processing of the SVGs at this time.

Another quick question for you, will the changes you pushed be included in a full release any time soon? Or if we want to use them in the near term will we need to use the pre-release?

[arklumpus]

They will be included in a full release at some point, but I don't really know when yet 😅 There are a few more changes that I'd like to make, but I don't know when I will have the time, unfortunately...