Textpattern CMS

#1 2005-11-11 14:58:59

paularms

Member

From: University of Minnesota

Registered: 2004-10-21

Posts: 155

Website

Reverse-Ordered Lists

I had a little time on my hands and did an experiment to create reverse-ordered lists using css. Read about them and check the source of the example page. I’m looking for comments/critiques on the way it is done, (not the validity of doing so).

Thanks.

#2 2005-11-11 19:19:36

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: Reverse-Ordered Lists

Interesting approach.

Actually, the CSS2 specification makes provision for this ( see http://www.w3.org/TR/REC-CSS2/generate.html#counters ).

The following CSS will implement an ordered list that starts numbering at 10 and decrements each subsequent element.

<blockquote>
ol {
counter-reset: reverse 10;
}
li {
display: block;
}
li:before {
content: “Number “ counter(reverse, decimal-leading-zero) “ “;
counter-increment: reverse -1;
}
</blockquote>

The result for an ordered list of 10 items is:

<blockquote>
Number 10 test
Number 09 test
Number 08 test
Number 07 test
Number 06 test
Number 05 test
Number 04 test
Number 03 test
Number 02 test
Number 01 test
</blockquote>

Unfortunately, the only mainstream browser that seems to support it is Opera.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#3 2005-11-11 20:23:44

paularms

Member

From: University of Minnesota

Registered: 2004-10-21

Posts: 155

Website

Re: Reverse-Ordered Lists

I thought that counters were CSS3 specs, not CSS2… hmmm…

But, the point was current cross-browser compatibility…

Last edited by paularms (2005-11-11 20:29:59)