How to programmatically determine how much area a block will occupy in the browser?

germn2011-06-20 12:35:15

css

germn, 2011-06-20 12:35:15

I have the source page code (as well as styles and scripts). How to programmatically determine how much space (say 200x300 px) a particular element (say a specific div) will take up in the user's browser? (assume that the browser, screen resolution, etc. is known)
Are there any ready-made algorithms? Tell me which way to dig: I can’t imagine how this can even be approximately implemented.

Answer the question

In order to leave comments, you need to log in

7 answer(s)

Anton, 2011-06-20
@germn

This, of course, is completely through the keyhole - but you can run a browser on the server and open a page with data (Sahi, Selenium) in it and get the block size from there. I know there is also wkhtml2pdf - this is for generating pdf from html on the server - it uses the webkit engine - so there is some way to interact with it.

Alexander, 2011-06-20
@0lympian

By and large, nothing: only render from the user and interrogate with javascript. Even if you take a particular browser, there may be different fonts installed, different sizes of the base font in the settings. Not to mention "little things" like the error of various anti-aliasing modes. For example, in cleartype, a few extra pixels in a line can “run in”, the word will be transferred, and then the height of the block will increase greatly.

Next_Alex, 2011-06-20
@Next_Alex

You can try to dig in the direction of jQuery. Namely, use it to enumerate all the elements of the page (or whatever you need) with the output of the information you need. Well, then test it on several clients to collect statistics.
For example, somehow you can find out the dimensions of a particular element on an already loaded page:

<html> <head> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script> function Start(){ var h = $('#test').height(); var w = $('#test').width(); $('#result').append( 'height = ' + h + 'px, width = ' + w + 'px, square = ' + (w*h) + '<br/>'); //outer dimentions - including margin, border and padding var oh = $('#test').outerHeight(); var ow = $('#test').outerWidth(); $('#result').append( 'outerHeight = ' + oh + 'px, outerWidth = ' + ow + 'px, fullSquare = ' + (ow*oh) ); } </script> </head> <body id="body" onload="Start();"> <div id="test">test</div> <div id="result"></div> </body> </html>

Sergey, 2011-06-20
@butteff

But what if you make the site static, not rubber? But with the help of jacquery for different screen resolutions, load your style sheet? Thus, you can be sure that nothing will crawl, the site seems to stretch, everyone is happy. Not?
Or why is it needed then?

ertaquo, 2011-06-20
@ertaquo

Alternatively, you can parse the html from css and get the size by adding padding and width/height.

Homakov, 2011-06-20
@Homakov

.getBoundingClientRect

Sergey Nalomenko, 2011-06-20
@nalomenko

Of course, I could not understand the question quite correctly, but what prevents you from opening the page in Firefox and viewing the element's metrics through Firebug ?