Measuring content

[Alekz]

Hi,
Does anyone know a way to measure HTML content?
I mean, I get some HTML and want to evaluate its width and height after it has beed rendered by a browser?
I was able to do this using a hidden div and placing the HTML in a table cell, so I actually measure the surrounding table... The problem is that a table will not allways render the content conveniently. Like this:
1. create an empty layer (may keep it invisible)
2. put a table inside: <table border="0" cellspacing="0" cellpadding="0" id="measurer"><tr><td nowrap>HTML content here</td></tr></table>
3. Then only for the width:
- for Netscape4.x:
w = layer.document.width;

- for Netscape 6.x, 7 and I suppose Mozilla 1+
tbl = document.getElementById('measurer');
w = parseInt(document.defaultView.getComputedStyle(tbl, '').getPropertyValue("width"));

- for IE4
w = layer.scrollWidth;

- for IE5+
w = layer.document.getElementById('measurer').scrollWidth;

Well is there a way to do the same without using a table?

Alex

[Roy Sinclair]

Yes, use <div id="measurer" ...>HTML Content here</div>.

[Alekz]

Hi,
I don't think it will work (I'll have to test though)...
That's from MSDN about the overflow style attribute:

Setting the overflow property to visible causes the content to clip to the size of the window or frame that contains the object.

If I understand well the meaning of the word 'clip' - if the frame where the DIV is located is too small, the content will not be measured correctly (the DIV won't resize to match the content, but the container window)...
Using overflow:hidden and a table will not be affected by this, but I'm looking for another way to do it...

Alex

[Roy Sinclair]

What are you talking about :confused: , I didn't say anything about overflow.

[Mr J]

The following will get you the size of the rendered HTML document

IE5+ anyway

document.body.scrollWidth
document.body.scrollHeight

[Alekz]

Hi,
I'm talking about ovewrflow attribute because it could affect the way a DIV renders the content... anyway... with overflow set to 'hidden' and oLayer - a reference to an absolutely positioned DIV

For Netscape 4.x
w = oLayer.document.width;
h = oLayer.document.height;

For IE4+
w = oLayer.scrollWidth;
h = oLayer.scrollHeight;

That seems to work, but what to do with Mozilla1+ and Netscape 6+?
I tried this:
w = parseInt(document.defaultView.getComputedStyle(oLayer, '').getPropertyValue("width"));
h = parseInt(document.defaultView.getComputedStyle(oLayer, '').getPropertyValue("height"));

But it returns the size of the DIV, not the size of the content...
It seems I can not find an element corresponding to the DIV content and measure it... Something like contentDocument for IFRAMEs...
Or maybe there's another way?

Alex

[Roy Sinclair]

Try:


w = document.getElementById("oLayer").offsetWidth;
h = document.getElementById("oLayer").offsetHeight;

[Alekz]

Hi,
No luck with offsetWidth as well, sorry...
If I set the DIV dimensions as style.width and style.height, it returns exactly the values I've set.
If I don't set these values, DIV resizes to fit the content and It's OK, but if the content exceeds the window size, DIV is resized to the window border and the value returned is incorrect.
It's the same with overflow:scroll setting...
The interesting thing with overflow:scroll is that the browser in fact measures content correctly, because it is scrolled to show all the content... I just can not find the way to get this calculated value :(((

Alex