[css3-lists] Proposal: list item marker from the content of the li element

In January there was a discussion in the WHATWG mailing list initiated by Anne van Kesteren, who pointed out that in special cases, such as legal documents, list item markers can be part of the contents rather than of the styling:
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-February/024998.html

Based on this discussion, and based on use cases out of my everyday work, I propose to add a possibility for taking list item markers from the contents of the li element. 


Use cases: 

All kinds of styling usually done with the combination of a hanging indent and a tabulator in word processors and layout applications. In practice they are often solved with tables or display:table-*. Some examples:

1. Legal documents where the list item markers are part of the cotent:

   I. ........
  II. ......
 III. ..........

§1    ..........
      ......
§1bis ...........
$2    ........

2. Checkbox and radio button groups with multiline labels:

o ........
  .....
o .........

3. CVs, recipies and whatever:

1966      .....
1973-1979 .........
          ....

1 big orange ...............
2 onions     ...................
             ........
Not too much .................
garlic       ..................
             .....


Possible solutions (alternatively):

1. Revive display:list-item-marker

This possibility was mentioned by Tab Atkins Jr. in the WHATWG list discussion, here:
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-February/025014.html

li input[type=radio], li span.marker {
  display:list-item-marker;
}

<ul>
  <li><input type="radio"> This label could be multiline</li>
  <li><input type="radio"> Another option<li>
</ul>
<ol>
  <li><span class="marker">§1</span> First paragraph text</li>
  <li><span class="marker">§1bis</span> Second part of paragraph 1</li>
</ol>

2. Introduce a new list-style-type:first-child

The first child element of the <li> element is then displayed as the list item marker. (If the first child node is a text node, the default marker for ul resp. ol is displayed, as for list-style-type:image when the image file is missing.)

ul, ol {
  list-style-type:first-child;
}

<ul>
  <li><input type="radio"> This label could be multiline</li>
  <li><input type="radio"> Another option<li>
</ul>
<ol>
  <li><span>§1</span> First paragraph text</li>
  <li><span>§1bis</span> Second part of paragraph 1</li>
</ol>
-- 
GMX.at - Österreichs FreeMail-Dienst mit über 2 Mio Mitgliedern
E-Mail, SMS & mehr! Kostenlos: http://portal.gmx.net/de/go/atfreemail

Received on Tuesday, 30 March 2010 20:40:44 UTC