For some time now, I have wanted a way to reverse the order of an ordered list in html. I really wonder why it isn’t built into the specifications. While it is not entirely useful to have, it creates for an interesting experiment when you have goals of it being cross-browser and scalable text compatible.

It is fairly easy to reverse-order a set of objects with set sizes. In the past I had to make a building floor map that would be built with link (with background images) that had hover states. You can see the example of this at the Coffman Reservations Page. There were two reasons for me to reverse order it. The first was to be able to have the irregular ground floor be clickable from all areas, even the cube at the far right without interfering with each other. The second reason was because generally one reads building directories from the lowest floor the the highest, so the ordering in the HTML seemed to make sense in the same direction.

I know that the method in this example is not necessarily the best, since it does not work correctly in IE/Mac or IE5/Win.

Anyway, let’s get down to it.

General CSS

The margin and padding of the list are dependent on the number of list-items that you are using. In this case, we are using 10 items, so you can see that our bottom-margin is -10em, while our top-padding is 10em. You will see more comments within the code for explanation.

ol#reverse {
    margin-bottom: -10em; /* number of items */
    padding-top: 10em; /* number of items */
}
ol#reverse li {
    position: relative;
    /* this creates the ability to keep the list items apart more */
    margin-bottom: -0.2em;
    /* fixes a bug in Firefox with non-collapsing margins */
    border-bottom: 1px solid transparent;
}
/* IE won't do transparent borders */
* html ol#reverse li { border-bottom-color: #FFF; }

pre Mozilla/Firefox non-collapsing margin is very confusing to me. If anyone would like to investigate it, I challenge you to do so. And since we are creating a transparent border, we need to degrade that for Internet Explorer by using the * html hack.

Specific CSS

Now, for each list-item, we need a different top relative position. I wrote a short PHP snippet to automate this action for me, but the math is actually pretty simple.

Each item is relatively positioned by the following formula:

-(((item_number - 1) *2) + ((item_number + 3)/10))

For a full example page, see the Reverse-Ordered List Example Page