Caret movement based on visual screen position rather than DOM order?

[michael]

This is just a rough idea I wanted to bring to discussion.

Assuming this DOM structure:

<div contenteditable="true" style="position: relative; width: 500px; height: 500px;">
  <div style="position: absolute; right: 0; top: 0;">text in top right corner</div>
  <div style="position: absolute; left: 0; top: 0;">text in top left corner</div>
</div>

And the cursor being after the last character of "text in top left corner". Now assume the user presses ArrowRight.

Current behavior: The cursor doesn't move anywhere as it's in the last available text position, according to DOM order.

New behavior: The cursor moves right before the "text in top right corner"

Concerns:

• RTL editing conflicts with this? Why?
• [Please add more concerns]

[michael]

@whsieh pointed out today that if you wanted to be able to select text from top-left to top-right corner, you'd have to split the selection into multiple ranges. Otherwise you'll end up with a selection like this: