CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
sbr
sbr

Reputation: 4823

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:

 <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 ?

Upvotes: 2

Views: 4497

Answers (2)

Guffa
Guffa

Reputation: 700322

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

Upvotes: 4

ro0ter
ro0ter

Reputation: 439

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?

Upvotes: 1

Related Questions