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

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 t开发者_高级运维o 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

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

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);