Re: [CSS2.1] Position of list-item markers

On Wednesday 12 November 2008 20:32, Saloni Mira Rai wrote:
> Hello,
>
> We need a clarification on positioning the marker for list-items in
> the scenario where list-item content is not right next to the
> principal box edge.
>
> Section 12.5 [http://www.w3.org/TR/CSS21/generate.html#lists] states
> "An element with 'display: list-item' generates a principal box for
> the element's content and an optional marker box as a visual
> indication that the element is a list item."
>
> And then in list-style-position
> [http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position
>] we have "outside The marker box is outside the principal block box.
> CSS 2.1 does not specify the precise location of the marker box. "
>
>
> Principal boxes defined here:
> http://www.w3.org/TR/CSS21/visuren.html#principal-box
>
>
> Block-level elements (except for display 'table' elements, which are
> described in a later chapter) generate a principal block box that
> contains either only block boxes or only inline
> boxes<http://www.w3.org/TR/CSS21/visuren.html#inline-box>. The
> principal block box establishes the containing
> block<http://www.w3.org/TR/CSS21/visuren.html#containing-block> for
> descendant boxes and generated content and is also the box involved
> in any positioning scheme. Principal block boxes participate in a
> block formatting
> context<http://www.w3.org/TR/CSS21/visuren.html#block-formatting>.
> Some block-level elements generate additional boxes outside of the
> principal box: 'list-item' elements. These additional boxes are
> placed with respect to the principal box.
>
> ---------
>
> The above text states that the marker should be placed outside of the
> principal box of the List-item element. However other browsers aren't
> matching this and we just want to clarify whether this is a bug, or
> whether the spec needs to change.
>
>
> Scenario #1 - List-item is immediately preceded by a float (left).
> The float pushes the list-item content to the right. According to the
> rules above the marker should be outside of the principal box and to
> the left of the float. However
> Opera and Safari all put the marker to the right of the float and
> next to the text. Firefox puts the marker on the float.
> IE8 puts the marker to the left of the float.
>
>
> Scenario #2 - List-item has text-align set to center. Should the
> marker be next to the text or outside the principal box? Firefox,
> Opera and Safari put the marker right next to the text, within the
> border of the list-item IE8 puts the marker outside the list-item.

According to the spec, the position of the marker should not be 
influenced by floats or text-align, it should always be in the margin 
of the principal box.

    xxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxx

     o #### xxxxxxxxxxxxxxxx
       #### xxxxxxxxxxxxxxxx
       xxxxxxxxxxxxxxxxxxxxx
       xxxxxxx

That's useful if the float is conceptually part of the list item, but in 
many other cases you'd rather want the marker to move. In CSS2, you 
cannot control that.

We analyzed a long time ago that there are a couple of different useful 
places for the marker, but in fact they are a function of another 
consideration: whether the float causes a block to indent more or not.

So rather than look at the marker on its own, we should look at how we 
want the list items to indent. The possibilities are:

1) No extra indent (the CSS2 behavior). The block width is not changed, 
each line is shortened as needed. The effect is that the text wraps 
around the float.

2) The float causes an extra indent, so that two blocks that normally 
look indented still look indented when there is a float next to them:

    * Without a float:

    a para a para a para a
    para a para a para a
    para

       indented para inden-
       ted para indented
       para

    * With a float:

    #### a para a para a
    #### para a para a
    #### para a para a
    #### para
    ####
    ####    indented para
    ####    indented para
    ####    indented para
    ####

In other words, the "relative indent" of the second para compared to the 
first is maintained by shortening the lines as needed for the float and 
then shortening them a bit more. The question is: how much more? There 
seems to be no automatic answer to that, so the designer has to somehow 
indicate which margins and/or paddings will be increased by a float and 
which not. (Or, alternatively: define which edge of which ancestor is 
the reference edge; all edges inside that are subject to incrementing 
by floats.)

3) Orthogonal to the above choices is the choice if all lines in a block 
should be shortened the same way, even after the float has ended, so 
that the block still looks rectangular:

    * Normal (CSS2) behavior:

    ####                    ##
    #### xxxxxxxxxxxxxxxxxx ##
    #### xxxxxxxxxxxxxxxxxx ##
    #### xxxxxxxxxxxxxxxxxxxxx
    #### xxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxx

    * Keep blocks rectangular:

    ####                    ##
    #### xxxxxxxxxxxxxxxxxx ##
    #### xxxxxxxxxxxxxxxxxx ##
    #### xxxxxxxxxxxxxxxxxx
    #### xxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxx
         xxxxxxxxxxxxxxxxxx

If we then define that the marker is subject to the same extra indent as 
the line it's on, then the way to get list markers on the right side of 
the float is to use option 2. Optionally, you can decide that that the 
list looks better if all markers line up, in which case you use option 
3 to force the UL to be rectangular.

The old proposal used two new properties, called 'float-displace' (to 
select options 1, 2 and 3) and 'edge-indent-reset' to mark where 
the "relative indents" start.

It's not especially easy to understand. My intuition says there must be 
a better way...



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Wednesday, 26 November 2008 17:08:12 UTC