CSS counters written out in words

Question

150 views Asked by chharvey At 09 December 2013 at 00:22

I use CSS to count sections in an HTML document:

body {counter-reset: sect;}
section:before {
    counter-increment: sect;
    content: 'Section ' counter(sect, upper-alpha);
}

The result is:

Section A

Section B

How can I style the counter to output numbers written in English?

Section One

Section Two

I have a solution via jQuery (using an array of strings) but I am looking to only use CSS. Is there a way to do this without using JavaScript?

There are 1 answers

**Niels Keurentjes** · Accepted Answer · 2013-12-09 00:33:20

Not yet. There's a spec in the works that allows setting custom glyphs and repeaters but it's currently still in working draft status and I'm not aware of any browsers supporting it yet. I just tried Chrome latest beta and it certainly doesn't, and MDN doesn't even seem to be aware yet of its existence despite the current version being over 2 years old already.