get pixel dimensions of innerHTML

**Yammaski** · 12-20-2010, 03:55 PM

Hi,

Is it possible to measure the pixelsize of a <span> on screen.
Customers can type a text, choose a font and color.
http://www.frogstyling.be/Asp/Detail...?ProductID=829

Now I want to show the height of text corresponding the choosen width.
I tried it with "offsetWidth" and "offsetHeigth", but then you get the dimensions of the fontframe :

Yam.

**vwphillips** · 12-20-2010, 06:35 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<span id="s1" >Some Text</span>
<span id="s2" style="font-Size:20px;" >Some Text</span>
</body>
<script type="text/javascript">
/*<![CDATA[*/

alert(document.getElementById('s1').offsetWidth);
alert(document.getElementById('s2').offsetWidth);
/*]]>*/
</script>
</html>

**Yammaski** · 12-20-2010, 08:01 PM

It's the height I want to show

**Nile** · 12-20-2010, 08:05 PM

Use Vic's code, just change it to offsetHeight.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<span id="s1" >Some Text</span>
<span id="s2" style="font-Size:20px;" >Some Text</span>
</body>
<script type="text/javascript">
/*<![CDATA[*/

alert(document.getElementById('s1').offsetHeight);
alert(document.getElementById('s2').offsetHeight);
/*]]>*/
</script>
</html>

**Yammaski** · 12-21-2010, 05:18 AM

I tried it with "offsetWidth" and "offsetHeigth", but then you get the dimensions of the fontframe :
http://www.frogstyling.be/span.jpg

As I told ... offsetWidth & offsetHeight is not what I'am looking for. These gives the dimensions of the space (see also red dotted rectangle on span.jpg) that the font takes :
http://www.frogstyling.be/fontHeight.png

I need the pixel-dimensions of what you see on screen. "textTEXTrrr" has another height/width as "textTEXTgrrr".

I hope this explanation is more clearly

Yam.

**jscheuer1** · 12-21-2010, 01:46 PM

From the fontHeight.png you reference, the only dimension consistently available cross browser is font-size. Even that, if not explicitly set in style, may be expressed in pixels (px) or points (pt), possibly other units. There is font-size-adjust, but that's not available cross browser and is only a ratio whereby one might be able to determine the Descent once the font-size is known. This will not tell you if any characters requiring the Descent space are used.

I must stress that these below are only theories:

If you know the font and the font size, and the font is from a file like a .ttf file. There should be information in that file about all of those dimensions expressed as a percent or as some other ratio. If you could retrieve that and test each character to see if it's one requiring the Internal Leading or the Descent, has capital letters or lower case ones requiring the full font-size or not, you should be able to come up with a number for all, or at least most of those dimensions.

There is one dimension not shown in your graphic, the difference in height between a lower case x and a capital letter. That's the aspect ratio or font-size-adjust, and may or may not be critical in this calculation.
The only other thing I can think of at the moment would be to use PHP or some other server side language to create an image from the text and then somehow determine the bounding box based upon the color values of the pixels or some other method.

If that can be worked out, it could be fetched via AJAX so as not to need to reload the page to get the height dimension.

But you are really putting a fine point on it. Are you charging by the pixel?

**Yammaski** · 12-21-2010, 02:42 PM

The only other thing I can think of at the moment would be to use PHP or some other server side language to create an image from the text and then somehow determine the bounding box based upon the color values of the pixels or some other method.

That's exactly what I want to do. My site is made in ASP_VB. I searched the net for several houres, in vain.

**jscheuer1** · 12-21-2010, 03:16 PM

I doubt you're going to find such a thing ready made, though you may. What search terms have you tried so far?

You may have to build the script yourself by sifting through the available functions for your version of ASP_VB. I don't think asp has the image/font functions you'd need, it may, but probably is required to get the text and font data to VB which might have the image/font functions, depending upon version. You may even need to upgrade/update to ASP.NET or switch to PHP, jasp, etc. to find what you need.

This forum (myself included) is decidedly weak on all of these (asp, VB, and ASP.NET, jasp, PHP for images/fonts in this detail, etc.). There are undoubtedly other forums where there is greater strength in one or more of these areas.

If you can find what you need in any server side language, though conversion to what you are using may be difficult, if possible it might be easier than writing from scratch. Forums (again other than this one) might be able to help with that.

If you do find it in another server side language, may as well post a link to it here on the off chance that someone might take an interest in converting it and/or using it in its native language.

**Yammaski** · 12-21-2010, 03:26 PM

I doubt you're going to find such a thing ready made, though you may. What search terms have you tried so far?

get pixelheight javascript, Font.GetHeight Method, Obtain Font Metrics, get height of div, ....

Here's a live model : http://www.123sticker.nl/indexnl.html?ref=tradetrackerchoose the 3rd : "plakletters/snijteksten". But this one is made in Flash I suppose.

**jscheuer1** · 12-21-2010, 05:01 PM

Ja, that's about all the (Dutch is it?) I've got, so I couldn't guess what to do to get the height or to judge if it was accurate. If it works, Flash is one way you could go, it's widely supported.

I still truly question how much accuracy is required here. You should still be able to render an approximation of what the finished product would look like and give a firm price without the type of precision you seem to want. Or give a disclaimer on the price +- so much and one on the rendering, "Text may be slightly larger or smaller than shown."

Still, if you really want to get this accuracy, I'd try search terms like:

visual basic crop image

visual basic image dimensions

visual basic text box in image

visual basic detect pixel color

And, as I said, find a forum that deals with VB a lot and ask there.

Thread: get pixel dimensions of innerHTML

Thread Tools

Search Thread

get pixel dimensions of innerHTML

Bookmarks

Bookmarks

Posting Permissions