This markup:
first<strong>second</strong>
gets rendered as
firstsecond
and now consider the task of inserting character in between first and second words.
User should be able (predictably) to chose where to insert the character: after t
in "first" or before s
in "second" so inside that <strong>
span.
Ideally it should be two caret positions (marked by |
):
first|<strong>|second</strong>
But this clearly has UX implications, e.g. both caret positions share the same place on rendering canvas/surface:
first|second
so user will see caret "stuck" while LEFT/RIGHT navigation.
I have solved this in my blocknote.net by inventing "directional caret", when caret arrives to that position from the right it caret stops here:
first<strong>|second</strong>
and if caret arrives from the left it stops here:
first|<strong>second</strong>
This works OK so far but the main problem is in visual feedback - after some time when you see caret blinking at that position you cannot determine where next character (say, 'X') typed will go, it could be
firstX<strong>second</strong> or
first<strong>Xsecond</strong>
Any idea of how to modify caret rendering to show its "real" position? In Sciter I've added "trail" to the caret:
but something tells me that it can be made better, so asking.
In fact there other "unusual" caret positions that I am handling in next version, for example position in between <ul>
and <ol>
here:
<ul>
<li>ul item</li>
</ul>
<ol>
<li>ol item</li>
</ol>
it is required to allow text (e.g. <p>
) insertion between these two lists. Ideally chosen caret rendering should support such cases too.
abc<a href>def</a>
for example.