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


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>

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 (section 8.1.2)

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

Thank you!

Problem courtesy of: B Rivera


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>

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.

Solution courtesy of: Musa


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 :

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

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

Discussion courtesy of: Deblaton Jean-Philippe

This recipe can be found in it's original form on Stack Over Flow.