How To Calculate Text Size in JavaScript

Here’s a JavaScript challenge: find the height and width of a string of text. Sounds easy, right? But there is more to this problem than meets the eye. Let’s say I have some text on the page:

How big is this text?

There is no way to get the size of the text itself, but I can get the size of an element wrapped around it. So let’s wrap the text in a span tag with an id:

<span id="howbig">How big is this text?</span>

Okay, now I can use the clientHeight and clientWidth properties to find the size of the span, right?

var box = document.getElementById('howbig');
alert(box.clientWidth + ' x ' + box.clientHeight);

Let’s try it out:

How big is this text?

If you’re using Safari 2, you should see this:

However, with Firefox 2 and IE 7 you will see something like this:

Browser Inconsistencies

What’s going on here? Firefox and IE always set clientHeight and clientWidth to 0 for relatively positioned inline elements. This leaves me with three alternatives:

1. Use offsetHeight and offsetWidth properties instead of clientHeight and clientWidth.
2. Change my inline element (span) into a block-level element (div).
3. Switch my element to absolute positioning.

The first option will work fine; however, the offset properties include borders in their size, which may not always be desirable. Changing to a relatively-positioned div means the box will expand to fill any available horizontal space, like this:

Instead of the width of the text, clientWidth is now giving me the width of the div (588px) in Firefox and Safari, and 0 in IE. That’s certainly not what I want! The third option, switch to absolute positioning, is the best alternative since it will work with both inline and block-level elements — plus the width of the element will always match the width of the text.

Playing Hide the Element

However, I still have a problem: I now have an absolutely positioned element floating on top of my other content. I could hide it by setting display to none, like this:

<span id="howbig" style="position:absolute; display:none;">How big is this text?</span>

Try this one out (the span is hidden, but the button will still test it):

How big is this text?

Now all three browsers are giving me problems:

Clearly I can’t hide the span with “display:none,” but there is another option: z-index. In Firefox a z-index of -1 will hide an element. The element will still be visible in Safari and IE, but it’s easy enough to position it behind another element on the page to conceal it (under a logo or content area, for example).

Putting It All Together

Here’s the final version, which includes absolute positioning and a z-index of -1:

<span id="howbig" style="position:absolute; z-index:-1">How big is this text?</span>
<input type="button" value="Show Size" onclick="var box = document.getElementById('howbig'); alert(box.clientWidth + ' x ' + box.clientHeight);" />

You won’t be able to see the span text “hidden” on this page, but click the button to try it out:

How big is this text?

Posted on October 18th, 2007 in the JavaScript category | Permalink

---

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

---

Leave a Reply

You must be logged in to post a comment.