how to calculate width and height of each character in a span

Question

What is the best way to calculate the width and height of each character in a span.

Say, the html looks like:

 T         


        

Answer 1

Instead of creating a span each time, try changing the innerHTML of the span and get its width. This would be much faster and will no trigger a lot of validation.

Give it a try, does it behave faster?

Answer 2

You can't really get the size of a character, because the amount of space it takes up depends on which characters it is next to.

For example, the characters A and V next to each other are kerned so that they are closer together than an A next to an A or a V next to a V. Putting the same number of characters interleaved takes less space than putting them next to the same characters:

AVAVAVAVAVAVAVAVAVAVAVAVAVAVAV
AAAAAAAAAAAAAAAVVVVVVVVVVVVVVV