[css3-lists] Proposal: list-style-position inside-hanging

One of the very common use-cases for list-style-position is the one usually called "hanging indent" in word processors and layout softwares: The position of the marker is supposed to align with the edge of the text column, as with list-style-position:inside, but the contents of the list item should appear as a block as with list-style-position:outside.

    Text bla bla bla bla bla
    bla bla bla bla

    * List item one
      list item 1
    * List item two

Trying to get this aligned cross-browser with setting appropriate margins and/or paddings on the ul/ol and li elements is quite a hassle. Even more, if you have ordered lists and at CSS writing time you don't know the number of list items to expect. 

So I suggest to add a third list-style-type value "inside-hanging":

<ul style="list-style-type:inside-hanging">
  <li>List item one<br>List item 1</li>
  <li>List item two</li>
</ul>

This is supposed to be rendered as above. Generally, UAs are encouraged to apply the minimum indent necessary per list:

ol { list-style-type:inside-hanging }

Rendering:

    Ordered list with less than 10 items:

    1 Item 1
    2 Item 2
    3 Item 3

    Ordered list with 10 or more items:

    1  Item 1
    2  Item 2
    .  ....
    10 Item 10

To give authors the possibility to define sets of lists with the same indent, a list-style-indent property could be added, taking as a value eiter a length, or a user-given keyword. Lists with the same keyword would then get the same indents: 

ol { list-style-type:inside-hanging; list-style-indent:mykeyword }

Rendering:

    Ordered list with less than 10 items:

    1  Item 1
    2  Item 2
    3  Item 3

    Ordered list with 10 or more items:

    1  Item 1
    2  Item 2
    .  ....
    10 Item 10

-- 
GMX.ch - Schweizer FreeMail-Dienst mit über 800.000 Mitgliedern
E-Mail & mehr! Kostenlos: http://portal.gmx.net/de/go/chfreemail

Received on Saturday, 5 June 2010 22:36:04 UTC