Re: [css3-lists] position:marker and compatibility with existing 'outside' implementations/content

On Fri, 17 Aug 2012 17:52:13 +0200, Øyvind Stenhaug <>

> Since I heard feedback on marker positioning was requested, I wrote down  
> some comments. I really only looked at the positioning of 'outside'  
> markers with respect to what can already be specified with CSS 2.1  
> syntax.
> It's possible I have misunderstood some parts of the spec, e.g. with  
> regards to the placeholder thing. If my assumptions are wrong, I think  
> the text needs to be clarified.
> In general, the model seems quite simple, which is often a good thing.  
> However, in some cases it seems all major implementations would need to  
> change, which makes me wonder if there would be compat issues.


> 3) Given the above, it seems basing the block axis position on the  
> 'inside' position (= immediately before the list-item's '::before') will  
> cause empty lines to appear more often than they do in Firefox/Opera.  
> Though maybe this was intentional, since "spec is similar to what IE  
> does, because that was sanest" as the IRC log for 2012-08-15 states.

I don't contest the sanity of IE, but I'd like to mention that we recently
[1] revamped our list implementation. Like Microsoft before us, we
examined CSS 2.1 and competing implementations. So we should be pretty
sane too (if I do say so myself :)) although our implementation does
highlight some problems with the spec, as this thread points out.

> 4) However, even so, the vertical alignment will be off if, for  
> instance, the list-item's contents start with a block that has vertical  
> padding and/or borders. Not even IE uses the hypothetical 'inside'  
> position in this case.

It could be sensible to align the list marker with the 'first formatted
line' [2].

> 5) No special attention is given to floats. For instance, here the  
> marker will overlap the float (and will be a long distance away from the  
> text that starts the line):
> <!doctype html>
> <style>
>     div {
>        float: left;
>        width: 100px;
>        height: 100px;
>        background: gray;
>        margin-right: 40px;
>     }
> </style>
> <div></div>
> <ul><li>list-item</li></ul>
> That doesn't happen in Firefox or Gecko, though it does in IE9 and Opera  
> with Presto>=2.9 or thereabouts. Since changing, we've seen some issues  
> popping up in the wild about this (e.g. on Wikipedia).

I'd like to reiterate this point. It breaks quite a few sites. Examples
   from our bug tracker:


Perhaps a way forward is to place the marker positioning edge flush with
the first line box in the ancestor list item, rather than the border edge.

An editorial issue: reading the spec would be easier with a link from the
section 4 definition of 'outside' to section 7.1, which defines the
‘marker’ value for ‘position’.

[1] version 11.60, containing work done in June 2011

Leif Arne Storset
Layout Developer, Opera Software
Oslo, Norway

Received on Monday, 24 September 2012 12:48:45 UTC