Visual web page segmentation

I have a task where I need to segment a web page visually so that I may be able to calculate the distance between two segments of the web page at various levels of the DOM tree. In the simple way I want to be able to obtain the boxes that enclose the display of the pages on the screen. e.g. consider this image: Image to visual of DOM structure as on display

This I drew using Chrome, which provides for each DOM开发者_JAVA技巧 node the corresponding rectangle on the display of the page in the browser. How can I get these boxes in my program so that I can process the page based upon how it looks on the screen.

I was able to do so by using QtWebkeit. It provides for each level of DOM tree the geometry() method and also access to the CSS properties.