With all the hype surrounding the new APIs and the fancy parts of CSS, I had almost forgotten about the new
reversed attribute that allows you to write a descending list of numbered items, as opposed to the default ascending list of numbered items.
You can get full details in the specification, but here I’ll summarize what it does and I’ll offer a solution for the fact that there is (from what I can see) no browser support for this attribute.
Summary of the “reversed” Attribute
As mentioned, using the new
reversed attribute, you can tell the browser that the numbering for the list items should display in descending order, instead of the default ascending.
At first, this confused me. I was under impression that this attribute would actually physically reverse the contents of the list. But that’s not the case. The items will still appear in the same order as they appear in the markup, but the numbers will begin with the highest. So if you have 10 list items, then the first list item will display with a number 10, the second with a number 9, and so forth.
The syntax is simple, you just add the
reversed attribute to any
<ol> element. This attribute is a Boolean attribute, so it doesn’t take any value.
The code (as if you needed an example!) looks like this:
<ol reversed> <li>List item one</li> <li>List item two</li> <li>List item three</li> <li>List item four</li> <li>List item five</li> </ol>
The result in the browser would be:
The “start” Attribute
In addition to the
reversed attribute, HTML5 also reintroduces the
start attribute for ordered lists. I say reintroduces because this attribute was introduced in older versions of HTML but eventually was deprecated in HTML4.
Using this attribute, you can specify at what number you want the list to begin. The value must be an integer, otherwise it will just default to “1”. So, without reversed, if you specify a start of “100”, then each list item will be numbered starting with 100. The result would be as shown below:
If you reverse the list, and specify a
start value, then the list will begin with that specified value and will go backwards. Like this:
Because it’s an older attribute, the
start attribute has full support everywhere, so that’s good news.
Fixing Old Browsers With “value” Attributes
All modern browsers and in-use browsers now support this feature. But if you need older browser support, here’s the interesting thing: Every browser allows you to use the
value attribute to change the number of each list item directly. This attribute was deprecated in HTML4 but is valid in HTML5.
Using this attribute, we can do this:
<ol> <li value=5>List item one</li> <li value=4>List item two</li> <li value=3>List item three</li> <li value=2>List item four</li> <li value=1>List item five</li> </ol>
But we all know that’s pretty lame — unless you’re doing something funky where you’re adding numbers that have no order or whatever.
But this gave me an idea.
A Polyfill for “reversed” for Old IE
After starting to write this article, and then realizing there was no support, I decided to write a polyfill. It didn’t take too long, as it accomplishes a pretty simple task: It looks for the presence of the
reversed attribute on an ordered list; then it counts the number of list items in the list; then it adds the
value attribute to each list item, with the appropriate integer.
It also takes into consideration the
start attribute, so if that’s present, it will start the numbered list at that number and descend.