The cursor style position to absolute (to stop the browser from modifying text flow or layout), while the height is set to 1em (to try and mimic the normal line height). Unfortunately, by setting the position to absolute, the browser no longer draws the caret in line with the text vertically, instead choosing to display it at position 0 of the cursor div (quite noticable on some of the documents I'm using).

Trying to find a fix for how to get the cursor position correct, I researched how Google Docs does this. I've noticed that Google Docs doesn't insert the caret inline into the text. It has a global caret element, who's position is updated on cursor navigation or clicks.

To this end, I made a quick demo showing how the googledocs cursor is achieved.

The pro's of this approach:

* No modifications of the document structure in order to render the cursor. This will be faster, more memory efficient (due to how text nodes etc. like editing)

* Cursor (so far in firefox and chrome at least) renders in a more natural spot, as it is vertically centred, and more easily put between characters (the current implementation also sits a tiny bit too far to the right, though that could be fixed with CSS easily enough I believe)

The con's (because nothing is perfect)

* Cursor synchronization will always need to be done manually. The existing implementation of placing the cursor inline with the text means the browser can take care of flowing the cursor along as text is edited.With the googledocs approach, each text modification etc. will need to relayout the cursors manually.

* Unsure about the speed of this approach

* Also unsure about how cross-browser compatible this is...

What do people think? Is there any benefit from the Range-based approach vs inserting a cursor node directly in the document? Is it worth me investigating further?

Cheers,