Programmatically find the distance between the rendered text of an html page

Question

Example: <span style="padding-right:10px;">left text</span><span>right</span>

In the above the distance between "left text" and "right" would be 10px after they have been rendered by a browser.

So my application, would take in an html file and 2 variables(strings that exist in the html file) and then find the horizontal distance(in pixels?) between the 2 strings.

Possible at all? I am guessing I will have to modify an open source engine like webkit to achieve this. right? Or is there a simpler way? Parse page for CSS rules...would that work?

If its webkit, then how hard would it be ? which languages would I need to master ? I only know php (bit of C , C# , java)

Thanks

In PHP no CSS parser / HTML+CSS renderer exists AFAIK. So you should use something else, like webkit+javascript to solve this. — hakre, Jul 02 '11 at 08:52

score 0 · Accepted Answer · answered Jul 02 '11 at 07:52

0

Use Javascript.

That way you can find properties of elements and then compare them to get their distance.

For example, you can use javascript to get element.left, element.width, and element2.left. Then, you can find the distance by taking element2.left - (element.left+element.width).

answered Jul 02 '11 at 07:52

Kevin Wang

3,290
1
28
40

Thanks ! This would work. I never thought of using javascript. Not sure how to get back the value returned by the javascript function...maybe inject js code into the htmlfile, outputting the distance in the page itself, run the file through cutycapt, then parse the output for the result. long but would work – gyaani_guy Jul 02 '11 at 08:08
QUestion: how to get the javascript element? All I have is a string – gyaani_guy Jul 02 '11 at 09:26
document.getElementById(elementsid); the id will be located as such: – Kevin Wang Jul 02 '11 at 18:31

score 0 · Answer 2 · edited May 23 '17 at 10:24

The following question from stackoverflow suggests a way you can find the distance between an element and the document top-left corner (using javascript and jQuery).

To find the distance between two elements I would assume that you can do the following:

 var el1offset =  $("#element1id").offset();
 var el2offset =  $("#element2id").offset();
 var distanceTop = Math.abs(el1offset.top-el2offset.top);
 var distanceLeft = Math.abs(el1offset.left-el2offset.left);
 var distance = Math.sqrt(distanceTop*distanceTop+distanceLeft*distanceLeft);

Programmatically find the distance between the rendered text of an html page

2 Answers2