Dynamic text scale and kern in SVG with embedded javascript



The below script is embedded in an SVG as part of a dynamic graphics production automation process. I'm attempting to adjust the font size and spacing dynamically in order to fit a variable text element. Minimum font size is 100px, maximum 210, minimum spacing is -26, maximum 0. I'm attempting to avoid overlapping letters (which will occur at minimum font size and spacing, and even a bit beyond, however the variable text should never be long enough that occurs, also I THINK my loops should prevent that too...)



<script id="script5413" type="text/javascript">var textpath = document.getElementById(&quot;textPath3098&quot;);
var path = document.getElementById(&quot;path3069&quot;);
var fontsize = 100;
var spacingsender = 0;
do {
fontsize += 0.5;
textpath.setAttribute(&quot;font-size&quot;, fontsize);
var spacing = -26;
textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
while ( (textpath.getComputedTextLength() &lt; path.getTotalLength()) &amp;&amp; (spacing &lt; 0) ) {
spacing += 0.5;
textpath.setAttribute(&quot;letter-spacing&quot;, spacing);
}
} while ( (textpath.getComputedTextLength() &lt; path.getTotalLength()) &amp;&amp; (fontsize &lt; 210) )
</script>


What I Think Should Happen:


The font-size starts at 100px, .5 is added to it, and set, then the font-spacing is set to -26px, if the value of textpath.getComputedTextLength is less than the path.getTotalLength value, then the font-spacing is increased in .5 increments until the value of font-Spacing either reaches 0 or the computed length is greater than the length of the guide path... it should then check to see if the text length is still less than the guide path, and if so add another .5 to the font-size and repeat the letter-spacing loop... it would seem, logically, that this will yield the largest possible font with a letter spacing not-less-than -26px that fits the path.


What Actually Happens: with 4 characters: max font-size (210), font-spacing of 0. well short of the path length.  4 characters


with 9 characters: still looks like max font size and spacing, very close to max path length.  9 charachters


with 10 characters: barf! the font-size is above 100, but the letter-spacing is -26, and we are well below the path length.  10 characters


with 15 charachters: even worse. font-size is now 100, and letter-spacing is -26, WELL below the guide path length...  15 characters


Anyone able to help me figure out what's going on here?


No comments:

Post a Comment