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 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.