Currently Listening to:
Weezer — The World Has Turned And Left Me Here

Some ordered lists are better presented in descending order. For example, my publications list works better in reverse-chronological order so that the most recent work appears at the top of the list, and is numbered highest-to-lowest.

Ordered lists in HTML are created using the ol element, but there’s no way to present a list in descending order. (It’s in the HTML5 spec, but might be a while before it’s generally usable.)

The JavaScript solutions I found to achieve this were all a bit rubbish—adding spurious numbers to the margin and generally messing up the semantics of the list. So I wrote a quick function that finds each ol element on the page that has the class “reversed”, and changes the “value” attribute of each li to the number it would have in a native reversed-order presentation. It’s not semantically perfect, but it degrades gracefully and will do until browsers support the HTML5 incarnation of ol. The JavaScript looks like this:

function reverse_lists() {
    var olists = document.getElementsByTagName('ol');
    for (var i = 0; i < olists.length; i++) {
        if (!olists[i].className.match(/\breversed\b/))
            continue;
        var items = olists[i].getElementsByTagName('li');
        for(var j = 0; j < items.length; j++) {
            items[j].setAttribute("value", items.length - j);
        }
    }
}

You can download a .js file with this function and upload it to your server. Apply the code by calling the function after all of your list elements (the first script element can be put in the document’s head if you have control over that):

<ol class="reversed">
    <li>Most recent item.</li>
    <li>Less recent item.</li>
    ⋮
</ol>
<script type="text/javascript" src="reorder.js"></script>
<script type="text/javascript">
    reverse_lists();
</script>

And in your place an empty space
Has filled the void behind my face.

Tagged with: • •