Object Width

Some objects already have their own width and height attributes, but what if you need to be more precise and know the width of a string or letter.

Below are four examples using Lowercase, Uppercase, Font Size, and a sample string.
Pass your mouse over the "a's" and String.

Lowercase
UPPERCASE

Font Size 7

String

 a
A
A
Here is some text

Object Width
Object Height

<span id="test" onmouseover="calwidth2('test')">a</span>
<span id="test2" onmouseover="calwidth2('test2')">A</span>
<span id="test3" onmouseover="calwidth2('test3')"><font size=7>A</font></span>
<span id="test4" onmouseover="calwidth2('test4')">Here is some text</span>

The script below will calculate the width of characters contained between:

<span id="test"">a</span>

<script type="text/javascript">
<!--
var char_width=''

function calwidth(w){
if (document.all){
char_width=document.all[w].offsetWidth;
char_height=document.all[w].offsetHeight;
display.innerHTML="Object Width = "+char_width+"
Object Height = "+char_height
}
else{
if (document.getElementById)
char_width=document.getElementById(w).offsetWidth
char_height=document.getElementById(w).offsetHeight
document.getElementById("display").innerHTML="Object Width = "+char_width+"
Object Height = "+char_height
}
}
window.onload=calwidth
//-->
</script>

<span id="test">a</span>

Have a play and type some text
 
You have typed 0 Characters
Total width of Characters =

Note:
Take a look at Object Width Test as the script uses a modified version of the above to calculate the width of the css generated box so that an warning is given when the box gets near the edge of the page.

what