Ever wanted to have list items in reverse order?

**Joshua Clinard** · Mar 17, 2003, 12:48

For instance, when creating a Top Ten list. Currently you can not do this with xhtml or CSS. If you think it would be useful, reply to the following topic.
http://lists.w3.org/Archives/Public/...3Mar/0111.html

**Knightime** · Mar 17, 2003, 13:19

Not sure why you'd want to do this. If you are hand-jamming the code, why not do it in whatever order you want it to display. If it's a function, then ORDER your query results ASC or DESC (in php)

**Joshua Clinard** · Mar 17, 2003, 13:31

Because I'd like to do it without having to write PHP code. I also would like for the code to validate, instead of having to use span, and nbsp codes.

**redux** · Mar 17, 2003, 13:34

it would also be semantically marked up correctly. nah, it makes sense, josh.

**Knightime** · Mar 17, 2003, 13:37

I must have missed the point since I am all screwed up trying to learn other languages. Is it intended to be a displaying function?

**vgarcia** · Mar 17, 2003, 13:44

Josh, are you saying some CSS like this?

Code:

ol {
  list-order: reverse;
}

If so, that would be really cool and I'd go for it. Is there really that much demand for it though? Probably not, but it has never stopped the w3c before.

**redux** · Mar 17, 2003, 13:47

Originally Posted by vgarcia

Is there really that much demand for it though? Probably not, but it has never stopped the w3c before.

exactly. i think it's just a logical addition to the spec. if you have ordered lists, you should be able to define the counting order...

**redux** · Mar 17, 2003, 13:50

Originally Posted by Knightime

I must have missed the point since I am all screwed up trying to learn other languages. Is it intended to be a displaying function?

well, the list would already be written in reverse order in the source, but the number automatically added to ordered lists would be reversed. so yes, you'd have something like

Code:

<ol style="list-order: reverse">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>

being displayed as

Code:

3. one
2. two
1. three

**redux** · Mar 17, 2003, 14:09

hmmm...people on the w3 list seem to think what josh meant is that this reverse order would actually reverse the order in which the list items are displayed, compared to how they appear in the source. not sure what he meant now...just to affect the visual, automatic numbering, or actually rejig the order ?

**Joshua Clinard** · Mar 17, 2003, 14:13

Originally Posted by redux

well, the list would already be written in reverse order in the source, but the number automatically added to ordered lists would be reversed. so yes, you'd have something like

Code:

 
<ol style="list-order: reverse"> 
<li>one</li> 
<li>two</li> 
<li>three</li> 
</ol>

being displayed as

Code:

 
3. one 
2. two 
1. three

That is exactly what I was intending.

**Hulkur** · Mar 18, 2003, 08:29

This requires, that whole list must be known (browser has to read it all before displaing anything) and markup must be correct or browser will display something very wrong (if anything at all)

**redux** · Mar 18, 2003, 11:29

Originally Posted by Hulkur

This requires, that whole list must be known (browser has to read it all before displaing anything)

which is what browsers do with many other elements already

and markup must be correct or browser will display something very wrong (if anything at all)

yes, but it's hoped that if you're concerned about semantically correct markup and CSS solutions such as this, you're coding to correct standards...

**Ian Glass** · Mar 18, 2003, 19:27

Hummm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html
 xmlns="http://www.w3.org/1999/xhtml"
 lang="en-US"
 xml:lang="en-US">

<head>

<title>My CSS Example</title>

<style type="text/css"><![CDATA[
ol {
 list-style: none;
 counter-reset: topten 11;
}

li:before {
 counter-increment: topten -1;
 content: counter(topten) ") ";
}
]]></style>

</head>

<body>

<ol>
  <li>Three</li>
  <li>Two</li>
  <li>One</li>
</ol>

</body>

</html>

Works in Opera... :-p

~~Ian

**redux** · Mar 18, 2003, 20:09

please close your li tags, ian

**Ian Glass** · Mar 18, 2003, 20:51

Just a mockup... There, feel better? :-p

Oh, and at least I've never used presentational markup on the forums, mister <b> </b>

~~Ian

**Ian Glass** · Mar 18, 2003, 21:03

Oh, great! Now, the CDATA junk ruins it. Thanks a whole bunch, redux. Don't you feel helpful now! :-p

Take that out if you use it, why don'cha.

~~Ian

**redux** · Mar 19, 2003, 03:45

Originally Posted by Ian Glass

Oh, great! Now, the CDATA junk ruins it. Thanks a whole bunch, redux. Don't you feel helpful now! :-p

Take that out if you use it, why don'cha.

~~Ian

heh...simple solution: external stylesheets (same as with javascript)

yeah, i do feel better now though. thanks ian

**vgarcia** · Mar 19, 2003, 06:50

Originally Posted by redux

heh...simple solution: external stylesheets (same as with javascript)

yeah, i do feel better now though. thanks ian

Sadly that is the best way to accomplish getting around CDATA in HTML documents for now. I learned that the hard way when converting a site to XHTML 1.1 and trying to add CDATA in. I just gave up and put scripts in other files.

**Ian Glass** · Mar 19, 2003, 09:00

Originally Posted by redux

heh...simple solution: external stylesheets (same as with javascript)

Well I didn't think Josh'd appreciate:

Code:

<!-- yadda -->
<link rel="stylesheet" href="yadda.css"/>
<!-- yadda -->

Yeah, the stuff you need is in yadda.css.

Lookie here, I try to be helpful, and all you've done is make fun of me. >:-(

:-p

~~Ian

**Joshua Clinard** · Mar 19, 2003, 10:07

Opera has less than 1% market share.

**Technosailor** · Mar 19, 2003, 10:54

...but it's the most standards-compliant and worthy to be used a general measuring stick.

**vgarcia** · Mar 19, 2003, 11:23

Originally Posted by Sketch

...but it's the most standards-compliant and worthy to be used a general measuring stick.

Really? I think Mozilla is right up there with Opera. Moz does some things better, Opera does others better, but I think they're both pretty even.

Oh yeah, and typing this from Opera 7, it still doesn't support accesskeys! Try pressing alt+s to post a reply; works in IE and Moz, but not Opera.

**vgarcia** · Mar 19, 2003, 11:24

Originally Posted by Joshua Clinard

Opera has less than 1% market share.

So does Netscape 4, but lots of people still have to support it in some way.

**Gybbyl** · Mar 19, 2003, 11:31

Code:

ol {
   list-order: reverse;
}

If so, that would be really cool and I'd go for it.

That's about the coolest thing I've ever heard someone think of (well i didnt hear them think of it) to do in CSS. I hope they start implementing more dynamic things like that without making you use a scripting language.

Kudos for the good idea.