W3C home > Mailing lists > Public > www-style@w3.org > November 2008

Re: [CSS2.1] Position of list-item markers

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 26 Nov 2008 12:45:52 -0800
Message-ID: <492DB580.5050707@terrainformatica.com>
To: fantasai <fantasai.lists@inkedblade.net>
CC: Saloni Mira Rai <salonir@microsoft.com>, "www-style@w3.org" <www-style@w3.org>, Sushanth Rajasankar <Sushanth.Rajasankar@microsoft.com>

fantasai wrote:
>
> For text-align, I think if we get a clear answer from web designers on 
> what
> should be done, we should do that. The question is:
>
>   For a list with 'list-item-position: outside', if I set 'text-align: 
> center',
>   should the marker move? What about 'text-align: right'?
>
> Jason's answer was
>   > preferably no, or, for right have the bullet go on the right side
> which makes perfect sense to me. Anybody else have an opinion?
>
>
It should go on the right for direction:rtl but not for text-align:right.
Nor for text-align:center or justify.

--

In principle list marker position is a property/business of  the list 
itself and not of its items.
I think it is enough to say that bullet is getting drawn in padding area 
of the list element -
immediate container of the list item in question.

Thus for these styles:

ul { padding-left: 14px;  padding-right: 0; margin: 1em 0; }
li { list-style-position: outside  }

list item marker box will be of width 14px and placed on the left of the li.

And for
ul { padding-right: 14px;  padding-left: 0; margin: 1em 0; }
that box will be on the right.

If there are both paddings defined for the list then side of marker 
depends on
the value of the direction attribute.

1) That is very close to what UAs are doing currently.
2) Limiting list marker position by padding area of the list item's 
container will help
    to implement dynamic refreshes significantly more effectively than now.
3) Will solve rendering problems when bullets are drawn on top of floats.

The only problem is with IE - it has by default ul { margin-left:xx; } 
instead of
ul { padding-left:xx; } as in e.g. FF. But I think it could be solved 
there by just
replacing stock styles of ul/ol elements.

Another option is to introduce explicit values like:

ul { list-style-position: padding | padding-left | padding-right;  }


--
Andrew Fedoniouk.

http://terrainformatica.com
Received on Wednesday, 26 November 2008 20:46:41 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:17 GMT