I'm trying to animate an <h1> on a letter-by-letter basis. As I can't do this whit the tag itself, I'll have to replace it. So I get it's DOM object in JavaScript and the element's child node's value is the text I need to put in the same place but in separate tags (<span>'s perhaps). I can grab all the font-* properties of the original, the problem is with the positioning of the new ones. After all, I'll have to use relative positioning, otherwise I'll end up stuck trying to correct positions every time an 'onresize' event happens.
Now how do I put the second letter after the first one to be in the exact place where the original tag's second letter was? Also, it has to be all in one line even even the window is
too small to display it, so I'm pretty sure I'm gonna need relative positioning.
Any ideas? Or any other way of 'letterizing' tags?

The only way I can think of off-hand is to have each letter in a independent span.
a span being an inline element will simply take up the space it's content needs by butting up to the previous element and pushing the following elements along the width of the block <hx> element . This way you don't need to change positioning into relative and using the document flow to your advantage rather than trying to work against it.

Thanks chrishirst. I knew a that separate spans were necessary, but somehow I got used to absolute/relative positioning, though I know it's a bad habit. If I use the document flow, I think the only thing I need to care aboout is the letter-spacing, which is either zero, or if it's different, I just have to set the left and right padding of the spans. The only thing about document flow is that it will brake into lines when the window is too small to display them in one line. Anyway it's not a big problem, thanksalot for your suggestion.

This isn't the same output, but it is the same concept:

http://www.mikeindustries.com/sifr/

It replaces the individual letters with Flash letters for any font that you want. Maybe you can hack this script enough to do what you want.

Wow! That's almost what I need! They even have an example page, I could take a look at the JavaScript there, I don't need the Flash anyway. Thanks a lot for this link!

OMG there's a problem with my internet connection! Sorry about that!