list-item display type

The list-item display type is bothersome. Although CSS is supposedly
about control over styling, predefining a 'list-style' serves to limit
list options to a small subset of what should be possible. The problem
stems from assuming a list item to be a single element when it is not.
Somehow there must be (1) access to the list marker for application of
styling properties distinct from the list item content, and (2) precise
control over the list item's indent relative to the marker. There
should also be more control over the content of the list marker. Here
are some suggestions for enhancing the spec that will not alter the
behavior of stylesheets that conform to the current spec.

Additional pseudo-element
~~~~~~~~~~~~~~~~~~~~~~~~~

Access to the list marker could be had by declaring that every LI
element has a default pseudo-element 'marker' that describes the list
marker. The display type of 'marker' would be 'float: left', and its
content would be determined by the list-style-type of the parent
element. Space between the marker and the first line of the list item
could be insured by either assuming the marker's default right margin
to be equal to one character space or by assuming the list marker to be
followed by a space character.

Enhancements to existing properties
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

list-style-type: 

Needs an additional value of "string", to allow the use of any
character or string of characters as a list-marker. A string value
would be enclosed in double quotes.

list-style-position:

Needs two additional values -- <length> and <percentage> -- to control
precisely how much the list element content is indented relative to the
actual margin.


Additional enhancements
~~~~~~~~~~~~~~~~~~~~~~~

In addition to "string", a list-style-type of "counter" could allow
arbitrary numbering styles if the following properties were defined:

  counter-style   (the numbering style)
  counter-start   (number to begin numbering)
  counter-parent  (boolean, prefix with parent's counter when true)
  counter-prefix  (string to be inserted before the counter number)
  counter-append  (string to be inserted after the counter number)

A new counter would be instantiated when an element includes the
counter-start property.

Example
~~~~~~~

(Assume a left margin of 0 for all elements)

<STYLE TYPE="text/css">
  OL     { counter-style: decimal;
           counter-start: 4;
           counter-prefix: "section "
           counter-append: ".";
           list-style-type: counter;
           list-style-position: 1em }    
  OL OL  { counter-style: decimal;
           counter-start: 1;
           list-style-type: counter;
           list-style-position: 1em;
           counter-append: "."; 
           counter-parent: true }
</STYLE>
...
<P>The results would be similar to this.</P>
<OL>
<LI>Item four
<OL>
<LI>Item four-one
</OL>
<LI>Item five with more text to show wrap around to one em
list-style-position
</OL>
...

The results would be similar to this.

section 4. Item four

  section 4.1. Item four-one

section 5. Item five with more text to show wrap
  around to one em list-style-position

Note
~~~~

The counter property could also be used as content elsewhere, including
"before" and "after" pseudo-elements.


David Perrell

Received on Tuesday, 6 May 1997 00:44:51 UTC