Question

So I have HTML text being rendered in a browser (in this case an Android WebView). I want to find out what the (x,y) location in pixels of any given line of text is AFTER it is rendered. The working definition of line I am using is not just all the text contained in a <p> tag or that appears before a <br> tag. I mean a line as it would appear to the user.

I am open to any suggested method.

Is there any CSS property that you are able to find the number of lines in a div and their respective heights? That would provide a workable solution.

Thanks!!

Answer 1

You can’t access a line individually. But, with some JavaScript, you can find the position of a line with a known index; here’s a basic outline:

var p = document.getElementById("ptag"); //get the text container that contains your line
var nthline = 3; //the line for which you'd like to find the position
var lnheight = parseInt(window.getComputedStyle(p).lineHeight); //get the height of each line
var linepos = [p.offsetLeft, p.offsetTop + lnheight * (nthline - 1)]; //a [left, top] pair that represents the line's position

Note: This assumes the container doesn’t have anything but text.