: Problems with Dynamic Text in SVG when font is not SVG So, I have an graphics automation chain that has been happily running on a headless linux environment using programmaticaly generated/altered

@Berumen635

Posted in: #Fonts #Javascript #Resize #Svg #WebFonts

So, I have an graphics automation chain that has been happily running on a headless linux environment using programmaticaly generated/altered SVGs and PhantomJS (currently 1.9.0) as a final rendering engine. I have some dynamic text replacement requirements, and resulting dynamic font scaling and adjustment needs... I've been using embedded SVG fonts and some crappy embedded javascript, which works fine, except for two things:

1) The client has some requests for fonts with ligatures (which SVG font format does not support)

2) We are kicking around a live preview option and would love to just be able to serve the SVG up to the webpage without rendering out a png/jpeg/whatever on our server before hand. keep the load down, make the clients CPU do the heavy lifting, all that.

In the interest of these issues I have been playing around with WOFF fonts, as the support for SVG fonts was never VERY good, and now that Chrome doesn't support them any more with the switch to the Blink engine, if I want the client do do my work I need something compatible with as many common browsers as possible...

So here's the issue: My automatic scaling fails miserable when I use a WOFF (or OFT or TTF) font and the @font -face function.

what I have been doing is just embedding the SVG font in my graphic in the defs and referencing with the DOM like any other SVG element. This does the things I expect and need when combined with java script like this:

<script id="multiscaler1" type="text/javascript">
var texta = document.getElementById(&quot;text8093&quot;);
var textb = document.getElementById(&quot;text8100&quot;);
var textpatha = document.getElementById(&quot;textPath8097&quot;);
var textpathb = document.getElementById(&quot;textPath8104&quot;);
var patha = document.getElementById(&quot;path8091&quot;);
var pathb = document.getElementById(&quot;path8089&quot;);
var charcounta = textpatha.getNumberOfChars();
var charcountb = textpathb.getNumberOfChars();
var fontsizea = 10;
var fontsizeb = 10;
var offseta = -13;
var offsetb = -13;
var spacing = 0;
while ( ((textpatha.getComputedTextLength() + (spacing * charcounta)) &lt; patha.getTotalLength()) &amp;&amp; (fontsizea &lt; 43) )
{
fontsizea += .5;
offseta += 0.2
textpatha.setAttribute(&quot;font-size&quot;, fontsizea);
texta.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offseta + &quot;,0)&quot;);
}
while ( ((textpathb.getComputedTextLength() + (spacing * charcountb)) &lt; pathb.getTotalLength()) &amp;&amp; (fontsizeb &lt; 43) )
{
fontsizeb += .5;
offsetb += 0.2
textpathb.setAttribute(&quot;font-size&quot;, fontsizeb);
textb.setAttribute(&quot;transform&quot;, &quot;translate(&quot; + offsetb + &quot;,0)&quot;);
}
</script>


Pretty crap, I know, but I'm a production manager and graphic artist, not a coder :P and it looks like this:



Which is what I want... (but of course only works on browsers that support SVG fonts...)

now, when I add this little beauty to my deffs

<style type="text/css"> @font -face {
font-family: Narrow-Bold;
src: url('WOFFFONTS/Narrow-Bold.woff');
}
</style>


and remove the SVG font data I get this:



Oh dear. That's not right at all. I've dicked around with my spacing values (which are there to deal with another situation where I change the character spacing to maximize font size based on string length...) and can get it to do this:



also quite wrong :/

What gives here? Any help? Frankly, it'd be lovely to switch all to WOFF (or @font -face linked OTF or TTF fonts, which BTW, do the same thing) fonts as I'd have a lot fewer 20,000+ line SVGs without embedding fonts all over the damn place...

I have tried different font conversion tools and even a trick I found in some google search results wherein you build the WOFF from the SVG, not the TTF or OTF... same results.

??

Below is a simplified example of a working self-contained SVG with embedded SVG font using the free Delicious Bold font. Obviously this will only work on a browser that supports SVG fonts. The embedded font was created from a fresh download of the OTF with FontForge For Windows Release 2015-06-12. I also created a WOFF version of the same font the same way (all default settings, ignoring the warning about "non-standard ems advance" in the TTF definition) and added an @font -face link with a different name that will point to the WOFF when it is in the same directory as the SVG. By editing the font-face="xxxxxx" in the text/textpath element of the SVG you can quickly switch between the embedded SVG font, (which works fine) the linked WOFF font (which scales incorrectly) and the system version of the font family ,if installed (which perhaps of note, renders slightly differently from the embedded SVG font, but also scales correctly)

This behavior is consistent across all tested browsers (Opera-latest for Windows 7 64bit, Mozilla-Latest Linux Ubuntu 14, Chrome-latest Windows 7/8 64bit, Safari 5.1.7 for Windows (supports SVG fonts), and PhantomJS 1.9.7 Linux CentOS 6.4 final (supports SVG fonts). It is also consistent across all fonts tested (many...) and font conversion engines (squirrel-font, FontForge, Birdfont...)

As the self contained SVG is too large to paste into the body, here's a link to it pasted into a JSfiddle project.

Yes, I do realize I could solve this by rendering with Apache batik, but: 1) Batik is slooooooooooooow. Sooooo sloooooooooooooooooooooooooow... OMG is it slow. 2) I want to be able to offload as much of the CPU load from my server as possible, the exact REVERSE of what batik will do 3) That's not the point, damnit!

Vote Up Vote Down

Login to post a comment!