Is there any way to find the width of a text string?

[lazy tech newbie]

Suppose I want to write a text string in Arial font onto my web page,
but first I need to know the width it will take up. Is there any way
to find this out?
Thanks,

 

[The Natural Philosopher]

Suppose I want to write a text string in Arial font onto my web page,
but first I need to know the width it will take up. Is there any way
to find this out?
Thanks,

yes, but its non trivial.

In a php application, I used some postcript libraries to calculate
string length in points, from the font size and font type.

Of course, that assumes the browser is actually using the font you
specified, and honors the font metrics (is that the right word?)

 

[Thomas 'PointedEars' Lahn]

Suppose I want to write a text string in Arial font onto my web page,
but first I need to know the width it will take up. Is there any way
to find this out?
Yes.

Thanks,

You're welcome.


PointedEars

 

[SAM]

Le 9/21/09 3:47 PM, lazy tech newbie a écrit :

Suppose I want to write a text string in Arial font onto my web page,
but first I need to know the width it will take up. Is there any way
to find this out?
Thanks,

No, you want to "display" a text in arial
(if user has this font in his computer)
then you want to know witch could be the size of this text on the user's
screen

maybe :

<p>
<span id="testMesurment">here a little text for testing</span>
<button
onclick="var b = document.getElementById('testMesurment').style;
var s = b.fontSize? (b.fontSize.replace('px','')*1.5)+'px':'14px';
b.fontSize = s; sizer();">increase letters size</button>
<script type="text/javascript">
function sizer()
{alert(document.getElementById('testMesurment').offsetWidth);}
sizer();
</script>
</p>

see :
<http://www.quirksmode.org/dom/tests/elementdimensions.html>

 

[SAM]

Le 9/21/09 3:59 PM, The Natural Philosopher a écrit :

yes, but its non trivial.

In a php application, I used some postcript libraries to calculate
string length in points, from the font size and font type.

Of course, that assumes the browser is actually using the font you
specified, and honors the font metrics (is that the right word?)

And then ... of what utility can be that php calculation ?
(from the moment the user may choice his own style of display)
i.e: I do not allow fonts smaller than 11px in my browers.

 

[Laser Lips]

You're welcome.

PointedEars

                                                   -- Bjoern
Hoehrmann
What is the point in these kinds of posts?
Clearing the person is asking for help, not a sarcastic response.
Graham

 

[Hubert Kauker]

Hm, I am not sure, how you can find out the width *before* the string
is written.
But you can always find out *after* it has been written and adjust any
page geometry accordingly.

Try to include something like the following into your document:

<div id="div0">
<span id="span0">Here we have a text string</span><span
id="span1">&nbsp;</span>
</div>
<div id="div1">&nbsp;</div>

When you have a script in the same document (no serverside script, I
am afraid)
taking the difference of the offsetTop properties of div1 and div0
should give the heigth of your text in px.
Similarly with offsetLeft for span1 and span0 to get the width in px.

Make sure to have styles including margin:0; padding:0; letter-spacing:
0; word-spacing:0;
line-height:100%; to avoid biased results.

I do not know if the above calculation is theoretically sound, i.e.
supported by any official standard, but it seems to work in practice
with useful accuracy in Firefox and IE.

Hubert

 

[Thomas 'PointedEars' Lahn]

Hm, I am not sure, how you can find out the width *before* the string
is written.

As discussed before (which I may have referred to, had the OP not been
*this* lazy). FWIW: offset* is a step in the right direction, but offsetTop
clearly is not.


PointedEars