Re: ol style - a number in a circle

I think you could use the ::marker pseudo-element from that same spec[1] to get what you want. Just set the height of the marker box in ems, and then the border-radius to half of that (or to '50%'), and give it a border of whatever you want. With a large enough height, you can maintain a circle even for double digits, otherwise it can become a lozenge shape as the number of digits increase. You could also adjust line-height and top-margin to gain more control over the position of the numbers.



On Mar 1, 2010, at 4:02 AM, Matthew Millar wrote:

> Hi Daniel,
> 
> Thanks for the reply.
> 
> I've seen the section about using unicode glyphs before, but i didn't feel it was the solution for 2 reasons:
> 
> First:
> Its very difficult to control the glyph. It uses the same attributes as the li, so if you have black text, you get a black bullet point. You also lack the ability to control different aspects of the bullet, for example, if the bullet was a number in a box, then i may want the number to be a different colour to the box, or for the box to be a certain thickness. Using a glyph you don't have that level of control.
> 
> Second:
> 
> Using a glyph requires each end-users system to have the font, with the glyph in. I've noticed, certainly on mine, that double-circled-decimal and filled-circled-decimal render as squares, because those gylphs aren't available in the font on my system.
> 
> I was hoping it was possible, to have two different controls, one for the bullet number and one for the bullet shape. This way you could control exactly what the bullets renders as.
> 
> Is this something that could be considered for the up coming standard?
> 
> Thanks,
> 
> Matthew Millar
> 
> > Date: Mon, 1 Mar 2010 10:14:37 +0100
> > From: daniel.glazman@disruptive-innovations.com
> > To: mattmill30@hotmail.com
> > CC: www-style@w3.org
> > Subject: Re: ol style - a number in a circle
> > 
> > Le 27/02/10 19:11, Matthew Millar a écrit :
> > > Hi,
> > >
> > > Is there currently any way to combine the list-style-types: circle and
> > > decimal?
> > >
> > > i.e. http://www.tendervendors.com/index.php
> > 
> > CSS 3 Lists cover that. See 'circled-decimal' value in
> > http://www.w3.org/TR/css3-lists/#non-repeating
> > 
> > </Daniel>
> > 

[1] http://www.w3.org/TR/css3-lists/#markers