real text size calculation?

[grayFalcon]

Hello!

I've got a small problem here. I'm trying to write some code that would
generate a drop-down menue for me, where I'd just need to enter the
menu- and submenu items into an array. The items are to be displayed as
text. Now, I want to have the layers with the submenues to appear more
or less under the appropriate main menu items. For this I need to be
able to calculate how many pixels a given text uses up on the screen of
the user. That's all fine with IE and an unproportional font like
courier. The problem is, there is this nice setting that allows you to
change the diplay size of the text - which is pretty much disfunctional
in IE, but in mozilla, it works. Which means that I can't just say that
one letter in courier, size 2, is 4 pixels wide and be happy with my
calculation, because then somebody can just pop up with another text
diplay size and *boom* - my calculation is wrong again.

Now, is there a realistic way to find out how many pixels _exactly_ a
piece of text takes up on the user's screen? Or can I make the given
piece of text a DIV and then have some kind of document.divname.left
that gives me the actual location of this text?

Thanks a lot in advance,
-Wojtek

[brotherli]

grayFalcon wrote:

Hello!

I've got a small problem here. I'm trying to write some code that would
generate a drop-down menue for me, where I'd just need to enter the
menu- and submenu items into an array. The items are to be displayed as
text. Now, I want to have the layers with the submenues to appear more
or less under the appropriate main menu items. For this I need to be
able to calculate how many pixels a given text uses up on the screen of
the user. That's all fine with IE and an unproportional font like
courier. The problem is, there is this nice setting that allows you to
change the diplay size of the text - which is pretty much disfunctional
in IE, but in mozilla, it works. Which means that I can't just say that
one letter in courier, size 2, is 4 pixels wide and be happy with my
calculation, because then somebody can just pop up with another text
diplay size and *boom* - my calculation is wrong again.

Now, is there a realistic way to find out how many pixels _exactly_ a
piece of text takes up on the user's screen? Or can I make the given
piece of text a DIV and then have some kind of document.divname.left
that gives me the actual location of this text?

Just put your text in a <span> or <div> (a table cell my also do it).
Once yout get the reference to that object using document.getElementByID
or other DOM commands you can read its size (object.offsetWidth,
object.offsetHeight) and its relative position (object.offsetLeft,
object.offsetTop). Now you have to run up the DOM tree in order to get
the absolute position of your object.

// get position of an object
var obj = document.getElementById('objectname');
var oX = obj.offsetLeft;
var oY = obj.offsetTop;

// add position of the parent object
var parent = obj.offsetParent;
while(parent && parent!=null)
{
oX += parent.offsetLeft;
oY += parent.offsetTop;
parent = parent.offsetParent;
}
Regards, brotherli

--

brotherli

[ mails to nu**@brotherli.ch won't be read! replace nugs with endless. ]

[Michael Winter]

On Sun, 15 Feb 2004 21:37:23 +0100, grayFalcon <fa******@gmx.de> wrote:

[snip]

Now, is there a realistic way to find out how many pixels _exactly_
a piece of text takes up on the user's screen? Or can I make the
given piece of text a DIV and then have some kind of
document.divname.left that gives me the actual location of this
text?

It is not possible to get font dimensions using JavaScript. With a fixed
piece of text, and trial and error, you can usually approximate width
using "em" dimensions (1em is the height of line, basically), but this
is of no use dynamically.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)