list-style-position and text-align

Pretty much everything written in:

http://www.w3.org/TR/CSS2/generate.html#list-style

for both outside and inside does not match reality at all.

outside
The marker box is outside the principal block box. CSS 2.1 does not specify the precise location of the marker box, but does require that for list items whose 'direction' property is 'ltr' the marker box be on the left side of the content and for elements whose 'direction' property is 'rtl' the marker box be on the right side of the content. 'overflow' on the element does not clip the marker box. The marker box is fixed with respect to the principal block box's border and does not scroll with the principal block box's content. The size or contents of the marker box may affect the height of the principal block box and/or the height of its first line box, and in some cases may cause the creation of a new line box. Note: This interaction may be more precisely defined in a future level of CSS.

"The marker box is outside the principal block box."
	Only in WebKit.  Other browsers make the outside bullet respect text-align.  It's been cited as a compatibility concern that WebKit doesn't do this.

"'overflow' on the element does not clip the marker box."
	I believe every engine clips the marker box.   I think most implementations have the marker painted as part of the line it occurs on, even for outside list markers.  To imply that it is somehow immune to the clip is to imply that it paints in a way that doesn't seem to match any implementation.  It would have to be painted by the list item instead.

"The marker box is fixed with respect to the principal block box's border"
	Only in WebKit.  Other engines have the bullet respect text-align, and so the marker box's location is variable with respect to the border.

"...and does not scroll with the principal block box's content."
	No engine does this as far as I can tell.  Consider:

	<ul ><li style="border:100px dotted #eeeeee; padding:100px;overflow:auto;height:100px; text-align:right"><div style="height:600px">Hello</div></li></ul>

	Since the bullets follow text-align in most engines (not WebKit), they end up inside the box, and so of course they scroll with the line.  In WebKit and Firefox when I tested, the bullet was clipped, so you can't even tell what would have happened.

"The size or contents of the marker box may affect the height of the principal block box and/or the height of its first line box, and in some cases may cause the creation of a new line box."
	Finally, something that is correct!  This text omits the fact that the marker box may affect the height of a descendant block box though, since the marker will affect the height of a line box in a descendant block and not just in the principal block box generated by the list-item.

As for the inside definition:

inside
The marker box is the first inline box in the principal block box, after which the element's content flows. CSS 2.1 does not specify the precise location of the marker box.

Again, this is just wrong.  When you have nested blocks inside the list item, the marker box is the first inline box inside some descendant block.  If it were the first inline box in the list item's principal block box, then when you put a div inside an li, you'd end up generating an anonymous block box to wrap the marker box, but that's not what happens.

I understand that CSS2.1 is reluctant to specify the details of how list bullets are positioned, but what is in the text right now is so completely and utterly wrong it's mind-boggling.  This really needs to be addressed.

dave
(hyatt@apple.com)

Received on Tuesday, 23 November 2010 05:17:11 UTC