I'm writing server-side software that makes a movie by generating individual frames in SVG and rendering to PNG with rsvg-convert. The movie requires an effect to be applied to text in the SVG on a character-by-character basis. With the SVG text element I cannot apply separate styles to each character, so I must render the text using individual text elements for each character.
My question is: what's the best way of obtaining the x-axis positions of each character, so that when I draw the text character-by-character it will look identical to the text drawn with a single text element.
ie ..
<text x="100" y="100">aic</text>
identical to <text x="?" y="100">a</text>
<text x="?" y="100">i</text> <text x="?" y="100">c</text>
This is one solution I have: when preparing the animation on the browser, use the getExtentOfChar() method of the SVG text element and pass that metadata to the server. I don't like this because it leaves me open to variations in browser implementations, installed fonts, browser bugs etc. Also it makes testing difficult and prevents me from generating these movies automatically from a script.
I suspect I'll need to work directly with the freetype2 or Pango library, but I'm hoping someone has solved this problem already.