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

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

This would be true if kerning was turned on. Those lines take up exactly the same space.
@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

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?

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related