Re: [css3-lists] list-style-position: outside

On Wed, 15 Jun 2011 19:38:34 +0200, Tab Atkins Jr. <>  

> On Wed, Jun 15, 2011 at 9:04 AM, Øyvind Stenhaug <>  
> wrote:
>> Hi,
>> regarding the definition of "list-style-position: outside", I see there  
>> has
>> been some back and forth. The latest WD (dated 24 May 2011), although  
>> still
>> missing a lot of detail, seemed to show some promise w.r.t. picking a  
>> simple
>> and predictable approach for horizontal alignment. Not sure about  
>> choosing
>> the list item's *parent* as a reference, though. For instance,  
>> depending on
>> which edge is actually referred to, it might not work well with current  
>> UA
>> stylesheets for HTML (where the space needed by an 'outside' list  
>> marker is
>> provided by padding on ul/ol).
> Using the parent of the list item for alignment was done specifically
> to help match current UA stylesheets, so all the markers will sit in
> the same gutter when you have mixed-direction content, rather than
> some markers being on the left and some being on the right, depending
> on the list item's direction.

Right, but even if it uses the direction of the parent, it should use an  
edge of the list item itself. I see the ED does this in section 7 though,  
so let's just forget about the WD.

>> In the editor's draft, 'hanging' has been removed from section 4, but  
>> its
>> behavior seems to have been transferred to 'outside'.
> No, I just transferred the part that was previous referenced by the
> "As hanging, but..." line.  Any behavior currently in 'outside' was
> always there.

After coming back to it today I think I understand how it's meant to work  
now. Maybe I got confused by looking at both WD and ED, or maybe I just  
didn't read carefully enough. I was misled by the part that says "the  
::marker pseudo-element is placed immediately before the first text or  
significant whitespace in the list item or its descendants". In actuality  
this seems to be only about placement in the formatting structure, which  
is not obvious given the previous references to boxes (e.g. "This property  
specifies the position of the ‘::marker’ pseudo-element's box in the list  
item"). Or it's about some temporary placement to be modified further,  
which again could probably be made more explicit. I think there should be  
a link to section 7 as well, since it's such a crucial part of the  
definition of 'outside'.

It's also a bit unexpected how "position: marker" actually means "position  
as a list marker outside the principal box". So, apparently, even when  
'list-style-position' is 'inside', if ::marker has position:marker it will  
act exactly like 'outside' in many cases (and very similar to it in other  

>> As written, it has a
>> lot of issues (e.g. marker will overlap border, marker can end up in the
>> middle of a table, several tests in the CSS 2.1 suite are being
>> contradicted).
> Could you explain this more?  My intention is to basically describe
> the current behavior of outside list markers in IE9 (and in Webkit to
> a lesser extent).  There shouldn't be any more overlapping than
> already occurs with outside markers.

Unfortunately I don't have IE9 currently, but after clearing up my  
confusion and realizing that section 7 is the part that specifies most of  
'outside', things make more sense and these issues go away.

For the border overlap thing, I think it still needs to specify exactly  
which edge is being referred to. It's the left or right (depending on  
parent element's direction) *border* edge of the list item's principal  
box, presumably. In contrast, the edge of the ::marker box referred to  
might need to be the margin edge?

I think there should be a link to the definition of "start"/"end", by the  

The ::marker pseudo can still end up in the middle of a table, e.g. if the  
list-item's first child is a table element where only some of the cells  
contain text. But since this only affects vertical alignment maybe that's  
not worth worrying about, I don't know.

One thing about section 7, it talks about a box's ancestor and "the parent  
of that box". But as far as I know there is still no definition of a box  
tree. Even if this is rewritten to use more correct terminology in terms  
of the element tree, one would run into issues with inline parents.

>> It also seems inconsistent with what's being specified in
>> section 7 (position:marker), and I'm not sure which one is intended to  
>> apply
>> (or what the relationship between these sections are).
> I'm extra-confused about this part.  ^_^  More detail, please?

See above, I was just confused by how "placed immediately before the first  
text" doesn't specify the final/box location like it did for 'hanging'  
(which used to have almost the same wording).

>> To me it seems to make sense to align to the "start" edge of the border  
>> area
>> of the list-item's principal box.
> This doesn't solve the mixed-direction-content case, where some list
> items are ltr and some are rtl.  It would make bullets appear on both
> sides of the list, requiring you to specify gutter on both sides or
> risk some bullets disappearing.

Yes, I oversimplified this. Anyway, not an issue after clearing up my  

>> Vertically it seems trickier, it should
>> probably align to the first linebox satisfying some criteria (e.g.  
>> in-flow),
>> creating one if none exists. Is this a sensible starting point?
> That's what it does.  The ::marker is first placed just prior to the
> first text (I think I need to clean it up to refer to in-flow), and
> then it's positioned, with the vertical position being its static
> position.


Possibly other things should be considered too, like display:table as  
mentioned earlier.

I'm wondering if you need to define whether position:marker is absolute  
positioning/out of/in flow as well.

Øyvind Stenhaug
Core Norway, Opera Software ASA

Received on Thursday, 16 June 2011 13:45:30 UTC