How to get Character Offset X & Y (Coordinates)

Question

I was told about textRange in IE, but I can't find equivalent in other browsers for it. I need a way to read the element's X,Y offsets that the viewer is seeing.

Answer 1

Firefox has Range object instead of TextRange in IE - https://developer.mozilla.org/en/DOM/range

From the first look I didn't see the methods that return coordinates, but they have something that will come in 4.0 that might help:

https://developer.mozilla.org/en/DOM/range.getBoundingClientRect

Returns a ClientRect object that bounds the contents of the range; this a rectangle enclosing the union of the bounding rectangles for all the elements in the range.

You can also look here: https://developer.mozilla.org/en/DOM%3aElement.getClientRects

The returned value is a collection of ClientRect objects, one for each CSS border box associated with the element. Each ClientRect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport, unless the element is inside an SVG foreignobject element, in which case the top-left is relative to the nearest foreignobject ancestor and in the coordinate system of that foreignobject. For tables with captions, the caption is included even though it's outside the border box of the table.

Originally, Microsoft intended this method to return a TextRectangle object for each line of text. However, the CSSOM working draft specifies that it returns a ClientRect for each border box. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.

To select:

IE:

var range = document.body.createTextRange();
range.moveToElementText(myDiv);
range.select();

Firefox, Opera, WebKit nightlies:

var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(myDiv);
selection.removeAllRanges();
selection.addRange(range);

Safari:

var selection = window.getSelection();
selection.setBaseAndExtent(myDiv, 0, myDiv, 1);