0

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.

jdesbonnet
  • 251
  • 3
  • 7

1 Answers1

2

If you wrap the characters in tspans you can style them: http://jsfiddle.net/longsonr/qxe4S/ isn't that much easier?

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Good idea!! I didn't think of that. I'm not sure it will suffice for all the effects I need as some will involve characters flying all around the place and eventually settling back exactly where they should be in properly formatted text. I can set dx,dy,x,y on the tspan elements, but it changes the positioning of subsequent glyphs. BUT I think this idea might buy me some time. – jdesbonnet Feb 23 '12 at 13:00