Determining string length in pixels

Simon Wigzell · Aug 7, 2003

I am adapting a javascript pulldown menu system to my dynamic website
generator - the arrays that hold the menu items information are read from a
database and will be different for different users of my system.
Unfortunately the javascript menu system requires that each menu cell's
width be dimensioned. if I don't hard code a large enough value then long
menu item names are trimmed, besides the fact that it then looks ugly for
most menu items that are much smaller than the hardcoded width. What I would
like to do is find the actual pixel width of a string which will have to
take into account the font, the character size, bold on or off, number of
characters and of course proportional font or not will make a difference
too...is there a way of determining in advance how wide in pixels a string
is going to be? e.g. if I set it to some hidden named html element with all
of its style properties, could I then retrieve the width of that element
with javascript? Thanks!

Grant Wagner · Aug 7, 2003

Simon said:
I am adapting a javascript pulldown menu system to my dynamic website
generator - the arrays that hold the menu items information are read from a
database and will be different for different users of my system.
Unfortunately the javascript menu system requires that each menu cell's
width be dimensioned. if I don't hard code a large enough value then long
menu item names are trimmed, besides the fact that it then looks ugly for
most menu items that are much smaller than the hardcoded width. What I would
like to do is find the actual pixel width of a string which will have to
take into account the font, the character size, bold on or off, number of
characters and of course proportional font or not will make a difference
too...is there a way of determining in advance how wide in pixels a string
is going to be? e.g. if I set it to some hidden named html element with all
of its style properties, could I then retrieve the width of that element
with javascript? Thanks!

<body onload="test('some text');test('some longer text');">
<script type="text/javascript">
function test(s) {
if (document.getElementById) {
var rulerSpan = document.getElementById('ruler');

rulerSpan.innerHTML = s;

alert(rulerSpan.offsetWidth);
}
}
</script>

<span id="ruler" style="visibility:hidden;"></span>

You'd class the span the same as the menu items so they'd inherit the font
family/size/etc.

It should work in IE 5.5+, Netscape 6 and Opera 7+.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

WIN32 - Update Text in a Window in order to show its size in Pixels and coordinates	0	Oct 4, 2023
Interfering CSS	1	Feb 9, 2024
getting the font size in pixels	4	Sep 8, 2007
Converting an Array to a String in JavaScript	7	Sep 22, 2023
Searching the smaller picture in the larger picture	2	Jan 24, 2024
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Determining default style properties	17	Jan 19, 2010

Determining string length in pixels

Simon Wigzell

Grant Wagner

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads