How To Calculate Width And Height Of Each Character In A Span

What is the best way to calculate the width and height of each character in a span. Say, the html looks like: Test 100 So, one way

Solution 1:

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

Solution 2:

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?