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 _______________________________________________ dev-tech-layout mailing list [email protected] https://lists.mozilla.org/listinfo/dev-tech-layout
