Re: [CSSOM] does CaretPosition need a "before/after" hint?

  From: Ojan Vafai 
  Sent: Wednesday, May 11, 2011 10:20 AM
  To: Robert O'Callahan 
  Cc: Ryosuke Niwa ; Julie Parent ; Eric Seidel ; www-style@w3.org ; Levi Weintraub ; Xiaomei Ji 
  Subject: Re: [CSSOM] does CaretPosition need a "before/after" hint?

On Tue, May 10, 2011 at 10:58 PM, Robert O'Callahan <robert@ocallahan.org> wrote:

  On Wed, May 11, 2011 at 5:46 PM, Ryosuke Niwa <rniwa@webkit.org> wrote:

    On Tue, May 10, 2011 at 10:20 PM, Robert O'Callahan <robert@ocallahan.org> wrote: 
        Right now, scripts can only access text in logical order (e.g. ABC 123 DEF is in logical order and FED 123 CBA is in visual order) and it seems like adding this hint and exposing that to script will necessarily exposes some information about the visual ordering of text. At that point, it seems natural to expose a way to walk text in visual order.


      I don't think we need to expose visual ordering or computed bidi levels to script for this flag to be useful. The most common way we use this flag is to compute accurate geometric caret positions. So we'd need a Web-exposed API to find a point or rectangle for a CaretPosition. 

    Same thing. Once you have a way to obtain point / rectangle for a CaretPosition, then you can query that on each logical position in DOM to figure out the visual order of text.

  You can use the existing Range.getClientRects API to do that already.


      The attachment flag may also be useful if you're trying to figure out whether to apply some command to the following text or the preceding text (or both).

    I don't follow. Are you saying that some editing commands depend on this flag?


  If, for example, you wanted to do something to a word that contains the caret (e.g., show spelling corrections), and you had two adjacent words with the caret in the middle (e.g. Thai), then you could use the attachment hint to decide which word to operate on.


I think a binary flag is sufficient here. Ryosuke, are there use-cases enabled by exposing bidi-level that the flag does not address?

Rob, do you have thoughts on what to name the flag? "attachment" is not especially clear to me. WebKit uses "affinity", which isn't great either but reads a bit better to me. 
I think “proximity” is better than “affinity” if I understand what it supposed to mean at all.

I haven’t followed the thread closely so sorry in advance if the next was discussed already.

I would like to know the meaning of “CaretPosition” that we are talking about. 

These should be valid caret positions:

</tr>|, |<tr>  - end and start of tr element, click on ENTER at that position causes new row to be created. Before or after the row.
<hr>|<hr> – position in between two block elements. The same is about other block elements:
<ul><li>text1</li></ul>|<ul><li>text2</li></ul> – allowing caret position in between such elements (<ul>s here) allows to input “text3”: 
<ul><li>text1</li></ul>text3<ul><li>text2</li></ul>

In general object that represents caret position in HTML should have following interface:

interface CaretPosition 
{
   bool atCharacter() ; 
        // true – character input at given position will not change DOM structure.
        // false – the caret is positioned on “head” or “tail” of DOM element.

   bool atTail() ;          
        // true – this is the “tail” position – either on the tail of DOM element 
        //        or on “after” edge of the character.
        // false – this is the head position of the element or character.

   bool advance(AdvanceDirection dir);
        // advances the CaretPosition  forward, backward, etc.

   bool advanceToCharPosition(AdvanceDirection dir) 
       // advance() to CP with atCharacter() == true. 

   Element  currentElement();  // element containing the CP
   TextNode currentTextNode();  // TextNode, valid if  atCharacter() == true.  

   bool isLess( CaretPosition other ) // true if this position is less than other. 
   bool isLessVisual( CaretPosition other ) // true if this position visually less than other. 

   bool isEqualTo( CaretPosition other ) // true if this position and other position
                                         // will end up in the same rectangle on the canvas. 

   bool fromXY( coord x, coord y, ... )  // true if the position is set to closest one to x,y. 
    

   // etc.

} 

I do believe that for the markup:

   <p>text</p>

CSSOM/DOM API shall produce following caret positions:

0 – start of <p> element
1 – before ‘t’, 2 – after ‘t’
3 – before ‘e’, 4 – after ‘e’
5 – before ‘x’, 6 – after ‘x’
7 – before ‘t’, 8 – after ‘t’
9 – end of <p> element

where positions #2 and #3 and similar are equal in terms of isEqualTo function.

That will allow to implement editing with acceptable level of WYSIWYG in HTML/CSS.


-- 
Andrew Fedoniouk

http://terrainformatica.com