How do I make a binary counter with the <ol> tag?

Question

I thought that I could do the following:

<ol style = "type:numeric; glyphs: '0' '1';">
    <li> Item 0 </li>
    <li> Item 1 </li>
    <li> Item 2 </li>
</ol>

to produce a list that counted in binary. That is, the above example should have produced:

0. Item 0

1. Item 1

10. Item 2

But alas, it did no such thing. Firefox just ignored my style suggestions.

I was reading about this on http://www.w3.org/TR/css3-lists/ (section 8.1.2)

But clearly I've misread / misunderstood the specification. Any help?

Thank you!

Answer 1

If you want to do it visible in every browser, you need to do it with another language (javascript/jquery, or with something comming from your server)

In the end, you just need to have something like that : http://jsfiddle.net/KdhxX/

<ol>
  <li value="0"> Item 0 </li>
  <li value="1"> Item 1 </li>
  <li value="10"> Item 2 </li>
</ol>

with the value inserted inside your "li" populated by javascript, or your server-side language

Answer 2

The type and glyphs properties go in side a @counter-style declaration, so you need to define counter style then use it.

@counter-style mybinary {
    type: numeric;
    glyphs: '0' '1' '2';
}

<ol style = "list-style-type:mybinary;">
    <li> Item 0 </li>
    <li> Item 1 </li>
    <li> Item 2 </li>
</ol>

I don't think any browser implements this though as this is all I found on it besides the working draft and this line from MDN

CSS Lists and Counters Module Level 3 Working Draft Adds support for and adds identifiers used in @counter-style rules to keywords. These changes are not yet reflected on this page as no browser currently implements them.