Re: list-item alignment in CSS

Todd Fahrner wrote:
> Yes, it's odd. I've suggested that the markers should take as much
> space as they need, intruding either partially into the list item
> content block, or completely a la "inside" style.

So far as I know, no browser places list-markers to the left of the
parent's left margin. Gut feeling is it would be better to have the
graphical representations in the spec fortified with corroborating
verbiage than revise graphics and define default behavior with negative
margins.

The behavior you suggest is sort of the default in MSIE 3.02. If you
set your default font large enough you can see it in a 10-item ordered
list.

9. Here's the ninth item.

10.   Here's the tenth. But the first-line indent is more like an
   incremental tab stop than a wrap around a float. Both the block
   indent and tab stop increments are in pixels and don't change
   when the default font size is increased.

This tabular behavior can't be described with CSS, negative margins or
no. This is one reason I suggested that browser-specific list-rendering
behavior be attributed to the keyword "outside" rather than to margins
and floating pseudo-elements that cannot describe what is happening by
default. By overriding the initial keyword "outside", the author
overrides the unknown default browser behavior.

I hope Håkon's revelation (to me, anyway) that the graphics in the spec
are wrong will be reconsidered in light of this proposed description of
LI rendering:

1. LI content may be block-indented relative to the left margin of the
list-item content. This block indent is described by the
list-style-position property, with a value of "outside" indicating that
the content should be indented by an arbitrary amount, a value of
"inside" indicating the content should not be indented at all, and a
length or percentage value indicating the content should be indented as
specified by the author.

2. The list marker is a floated pseudo-element. This pseudo-element is
positioned at the left (or right, depending on direction) margin of the
LI element and has an initial width equal to the block indent of LI or
its own content, whichever is greater. The content is determined by the
list-style-type property, and may be aligned to the right, left, or
center of the element's width by some as-yet-undefined mechanism. The
initial alignment is UA specific, as is an initial margin-right to
maintain space between the marker and the LI content.

Example markup:

OL LI  { list-style-type: decimal;
         list-style-position: 3em;
         margin-left: 0 }

Netscape's rendering:

 99. Here's item ninety-nine. The number is flush
     right in a floated block with a width equal to
     the block indent of LI content.
100. Here's item one hundred
.
.
1000. The marker block is widened to the width
     its content, causing the first line of LI
     content to be correspondingly indented.*


Microsoft's rendering:

99.  Here's item ninety-nine. The number is flush
     left in a floated block.
100. Here's item one hundred
.
.
1000. The marker block is widened to the width
     of its content, causing the first line of LI
     content to be correspondingly indented.


In the case of "inside" lists, the marker block width will always
correspond to the width of its content + margin-right.

Left-hanging list markers are achieved by giving the LI element a
negative left margin equal to the list-style-position value.

Another addition to the spec: 'list-style-align' with values of left |
right | center for positioning the marker within its block.

And so could full author control of list positioning be had.

David Perrell

* Netscape Navigator 3.01 doesn't indent list content to accommodate a
marker. If a marker is too wide to fit between the list content indent
and the margin, the marker overlaps the content.

Received on Thursday, 5 June 1997 11:34:28 UTC