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 ?

Guffa · Accepted Answer · 2012-11-15 23:55:18Z

4

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

answered Nov 15, 2012 at 23:55

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tom Over a year ago

This would be true if kerning was turned on. Those lines take up exactly the same space.

Guffa Over a year ago

@tom: That depends on what browser you are using, and possibly some other factors, like operating system. I use Firefox in Windows, and there the lines are not the same length.

ro0ter · Accepted Answer · 2012-11-15 23:42:09Z

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?

answered Nov 15, 2012 at 23:42

ro0ter

4392 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related