From JS; how to get positions of individual characters?

[Kenneth McDonald]

I'm attempting to write a "pure DOM" text editor, i.e. one that doesn't
make any use of special features that are used (I think) by all of the
current WYSIWYG in-browser editors. The problem I'm trying to resolve
right now is; when the user moves the cursor vertically, how do I
determine where to position it?

For example, let's say they press the up arrow key to move the cursor up
one line. Assume for the time being that the text will be in a linear
left to right, top to bottom Western layout. Moving the cursor up should
leave it in the line that is visually above the line the cursor was
previously on, with its x-position as near as possible to its previous
x-position.

However, there doesn't seem in JS to be any way of finding the bounding
box of individual characters within text nodes. The two solutions I've
come up with are

1) Using a 0-width SPAN element, successively move it backwards one
character at a time, testing its coordinates at each position, until a
suitable position is found. normalize text nodes as the SPAN element
"leaves" them.
2) Move backwards one text node at a time; at each text node, "explode"
that node by placing each character into a single SPAN element, and then
test the bounding box of each character. When leaving a text node,
"implode" it back to its previous state.

Aside from being a bit of a pain to program, my main concern with these
methods is that they might be too computationally intensive. The first
will require a lot of splitting and rejoining of text node contents,
while the second may require (depending on the size of the text node)
creating a great many one-character DOM elements.

More importantly, I'm worried about how much rendering time this might
take; if the browser does a full re-render each time (even though,
theoretically, neither of the above methods should actually cause any
visible change in the page (I think), that could chew up some
significant time. If anyone familiar with the internals of Gecko could
comment, I'd greatly appreciate it.

And, if anyone knows of a simpler method of doing this, please let me know!

Thanks,
Ken

[Boris Zbarsky]

Kenneth McDonald wrote:
> More importantly, I'm worried about how much rendering time this might
> take; if the browser does a full re-render each time

It'll do an incremental re-render each time, actually. Those should be decently
optimized, hopefully.

-Boris

[long...@gmail.com]

On Apr 6, 8:04 pm, Kenneth McDonald <kenneth.m.mcdon...@sbcglobal.net>
wrote:

If you know a piece of text does not wrap and you are using xhtml, you
could try overlaying it with the same invisible(opacity="0") text and
font in SVG and then use the SVG DOM to get the positions of
individual characters.