W3C home > Mailing lists > Public > www-style@w3.org > June 2010

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

From: Markus Ernst <derernst@gmx.ch>
Date: Sun, 06 Jun 2010 10:50:26 +0200
Message-ID: <20100606085026.173180@gmx.net>
To: "Markus Ernst" <derernst@gmx.ch>, www-style@w3.org
-------- Original-Nachricht --------
> Datum: Sun, 06 Jun 2010 00:28:47 +0200
> Von: "Markus Ernst" <derernst@gmx.ch>

> 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":

I am sorry it was late at night - of course id should always say list-style-position, not list-style-type.

> <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

-- 
Sicherer, schneller und einfacher. Die aktuellen Internet-Browser -
jetzt kostenlos herunterladen! http://portal.gmx.net/de/go/chbrowser
Received on Sunday, 6 June 2010 08:51:01 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:28 GMT