javascript - 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:

 <span style="font-size:12px">Test 100<span>

So, one way is to make a dummy span for each character with the span's style and append it to dom and get it's height and width.

Example, using query:

 var x = $('<span style="font-size:12px">' + 'T' + '</span'>);
 $('body').append(x); 
 var h = x.height(),  w= x.width();
 x.remove();

But this is inefficient. Is there any other way to do it ?

Answer 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