Ordered Lists <ol> Counting order

**dbr** · Oct 1, 2006 10:33

Is there any way to make an ordered list count from the bottom up instead of the top down? In other words: reverse the order. e.g.

List:
3. Third and last item entered in list
2. Second Item
1. First Item

Instead of the typical:
1. First Item
2. Second Item
3. Third and last item entered in list

Thanks,
Dave

**icovey** · Oct 1, 2006 13:34

Dave,

As far as I'm aware there's no way to do this using pure html or css.

To ensure that the list stays dynamic you'll have to use a script.

Cheers

**brandaggio** · Oct 1, 2006 14:31

You can do this, though it is not that elegant just yet:
http://johnwozniak.com/code-lab/list...-reversed.html

**AutisticCuckoo** · Oct 1, 2006 22:44

In theory you can do this with CSS, but AFAIK only Opera supports it.

**zcorpan** · Oct 1, 2006 23:56

Originally Posted by AutisticCuckoo

In theory you can do this with CSS, but AFAIK only Opera supports it.

You can reorder content with CSS? How?

**AutisticCuckoo** · Oct 2, 2006 00:14

Oh, I misread the question!

<excuse type="lame">Monday morning</excuse>

I thought it was only about changing the list numbering. Sorry.

In theory, you might be able to achieve this with some creative use of position:relative, but it wouldn't be a general solution.

**AutisticCuckoo** · Oct 2, 2006 00:21

Here's a simple document that reverses the order of a three-item list:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <title>Reverse List</title>
  <style type="text/css">
    li {position:relative; line-height:1.5}
    li:first-child {top:3em}
    li+li+li {bottom:3em}
  </style>
</head>
<body>
  <ol>
    <li>First item.</li>
    <li>Second item.</li>
    <li>Third item.</li>
  </ol>
</body>
</html>

It won't work if the list items wrap over multiple lines, though.

**dbr** · Oct 2, 2006 07:35

I appreciate the all the input. The use would be for a list that perpetually grows. Rather than having to scroll to the bottom of the page to see the most recent item, it would appear at the top in a reverse order list.

AutisticCuckoo, that is a pretty clever solution. Too bad the list can't continue to grow.

Searching the internet, I've noticed I'm not the first to ask this question, so there is wider interest in this feature.

NEXT QUESTION: Anyone know where one would start researching the specifications for CSS and petitioning to have a feature added?
I do see a problem with how I'm assuming css works: FROM THE TOP DOWN, so any implementation would propably need a total number of list items in the <ol> tag. eg. <ol total="120"> and this number would have to be manually adjusted everytime another item was added to the list.

**Stormrider** · Oct 2, 2006 08:30

Have you thought about using a <dl>, using server side scripting to insert the numbers for you, and styling appropriately?

HTML Code:

<dl>
   <dt>3</dt>
   <dd>Item 3</dd>
   <dt>2</dt>
   <dd>Item 2</dd>
   <dt>1</dt>
   <dd>Item 1</dd>
 </dl>

I know it isnt as good as if it did it automatically, but I've used it before when i wanted to alter the text in an ordered list (from '1' to 'Step 1'), and it works quite well.

**AutisticCuckoo** · Oct 2, 2006 09:21

I'm not so sure this is a 'feature' that should be added to CSS. You'd rely on styling, but what about those user agents that don't support CSS (not only Lynx, but also search engines). I think you should put your markup in the logical order, especially if you're using an OL which implies that the order has semantic meaning.

What if this were to be added to CSS? Imagine a very big list with thousands of items. A user agent would then have to read through all of that (which can take some time on a slow connection) before it could start rendering anything. We'd be back to table performance (or the lack thereof).

**brandaggio** · Oct 2, 2006 09:34

Not sure if no one bothered to view my earlier post, but just to reiterate:

Code:

<h1>Cross Browser Reversed Ordered List</h1>

<ol>
<li value="3">Makes this list item number 3.</li>
<li value="2">Makes this list item number 2.</li>
<li value="1">Makes this list item number 1.</li>
<li>Makes this list item number 2.</li>
</ol>

**AutisticCuckoo** · Oct 2, 2006 22:41

John, the original question said that the items should appear in order 1, 2, 3 in the markup, but be displayed in order 3, 2, 1.

Besides, the value attribute for LI is deprecated.

**brandaggio** · Oct 3, 2006 05:13

Weird - that is not how I read this:

Is there any way to make an ordered list count from the bottom up instead of the top down? In other words: reverse the order. e.g.

List:
3. Third and last item entered in list
2. Second Item
1. First Item

Is this not just 1, 2, 3 reversed including the list item itself?

The code in question appeared to validate to XHTML strict so I didn't see how it could be deprecated (as much as it looked like it should be).

My fatal error here was relying/just looking at the Firefox Tidy Extension instead of the "real" validator - doh! I wish it behaved 100% the same

.

**AutisticCuckoo** · Oct 3, 2006 05:41

Originally Posted by John Wozniak

Is this not just 1, 2, 3 reversed including the list item itself?

As you see, the first element says, 'Third and last item entered in list'. I take it that means that it's the last LI in the markup.

Originally Posted by John Wozniak

The code in question appeared to validate to XHTML strict so I didn't see how it could be deprecated

In the XHTML 1.0 Strict DTD, the declaration of the li element type is:

Code:

<!ELEMENT li %Flow;>
<!ATTLIST li
  %attrs;
  >

The attrs entity is defined as,

Code:

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

which expands to

Code:

<!ENTITY % coreattrs
 "id          ID             #IMPLIED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED"
  >

<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED
  xml:lang    %LanguageCode; #IMPLIED
  dir         (ltr|rtl)      #IMPLIED"
  >

<!ENTITY % events
 "onclick     %Script;       #IMPLIED
  ondblclick  %Script;       #IMPLIED
  onmousedown %Script;       #IMPLIED
  onmouseup   %Script;       #IMPLIED
  onmouseover %Script;       #IMPLIED
  onmousemove %Script;       #IMPLIED
  onmouseout  %Script;       #IMPLIED
  onkeypress  %Script;       #IMPLIED
  onkeydown   %Script;       #IMPLIED
  onkeyup     %Script;       #IMPLIED"
  >

As you can see, there is no value attribute in the Strict DTD. This is the same as for HTML 4.01 Strict, of course.

**brandaggio** · Oct 3, 2006 05:53

Originally Posted by AutisticCuckoo

As you see, the first element says, 'Third and last item entered in list'. I take it that means that it's the last LI in the markup.

I was simply showing what would happen to the list item if a value was not placed on the 4th list item, not that the list should look like the example verbatim.

As far as "value" being deprecated I never needed it so I didn't realize and I don't always remember to run in through the "full" validator" (usually don't need to fortunately).

Most of what I have learned is not deprecated I have learned by using it/trying to use it and having the validator choke - so I will add this one to the list

.

When I really am in the mood for a "good yarn", I read the spec

.

**dbr** · Oct 3, 2006 08:38

Originally Posted by John Wozniak

Not sure if no one bothered to view my earlier post, but just to reiterate:

Code:

<h1>Cross Browser Reversed Ordered List</h1>

<ol>
<li value="3">Makes this list item number 3.</li>
<li value="2">Makes this list item number 2.</li>
<li value="1">Makes this list item number 1.</li>
<li>Makes this list item number 2.</li>
</ol>

Sorry, I did not give your eearlier post a better look. This may indeed do just what I'm interested in. On my post about changing css to add a reverse order I mentioned having to place the highest number in the initial tag e.g. <ol total="120"> which should preclude the problem

Originally Posted by AutisticCuckoo

What if this were to be added to CSS? Imagine a very big list with thousands of items. A user agent would then have to read through all of that (which can take some time on a slow connection) before it could start rendering anything. We'd be back to table performance (or the lack thereof).

Autistic Cuckoo brought up.

It is not that much more trouble to add a new value= each time instead of updating <ol total=...>

I'm going to give your suggestion a try. Thanks for posting and sorry I didn't pay closest attention previously.

Dave

ps Does indeed do what I want. Too bad it has been depreciated.

**Stormrider** · Oct 3, 2006 10:30

Well, as someone said, it doesn't make sense semantically. An ordered list is axactly that - a list, in order. Not reverse order.

**Tyssen** · Oct 3, 2006 14:48

Originally Posted by Stormrider

Not reverse order.

Reverse is still an order though. Think of SQL: you can either order by ascending or descending.

**Stormrider** · Oct 3, 2006 15:37

Yeh, I did think that actually. Maybe they need a dir="asc|desc" attribute for <ol> :P

User Tag List

Thread: Ordered Lists <ol> Counting order

Thread Tools

Display

Ordered Lists <ol> Counting order

One question begets another

Sorry

Bookmarks

Bookmarks

Posting Permissions