ansaurus

Question

Change the numbering on an ordered list?

Answer 1

+4 A:

There's the value attribute on li, although that's deprecated:

<ol>
    <li value="2">item two</li>
    <li value="6">item six</li>
    <li value="9">item nine</li>
</ol>

The w3schools page for <li.@value> says:

The value attribute of the li element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

Note: At the moment, there is no CSS alternative for the value attribute.

(Despite saying "use styles" for the deprecation warning on the main <li> page.)

The HTML 5 editor's draft reference for li suggests it's still valid there...

Jon Skeet 2009-06-15 07:06:00

Answer 2

+6 A:

In HTML 4.01 there is a deprecated value attribute on <li> :

<ol>
<li value="30"> makes this list item number 30.
<li value="40"> makes this list item number 40.
<li> makes this list item number 41.
</ol>

The non-deprecated (CSS) answer is (as so often) more elegant but less... direct :) The spec is somewhat dry; googling turns up more immediately usable stuff such as this :

Just like continuing the numbering from the previous list you’ll need to set the CSS property for incrementing the proper counter. But to make it start incrementing from a different starting point you can pass an optional second parameter in counter-reset property of a number. So starting from 5 would look something like this in your CSS:
ol.continue {
  counter-reset: chapter 4;     /* Resets counter to 4. */
}
Since the counter will always be reset before it is incremented, to start our list with the number 5 we will have to set the counter to 4.

AakashM 2009-06-15 07:06:19

so with that CSS option, that would require non-sequential items to be wrapped in their own OL?

nickf 2009-06-15 07:38:30

The example isn't entirely relevant. You can change the rule to `ol li.myclass` for your purposes.

Alan 2009-06-15 09:16:47

HTML5 actually allows @value again, because it is, actually, not a presentational attribute.

Ms2ger 2009-06-15 11:20:52

Answer 3

+4 A:

Looking at all these answers is making me feel a bit icky. Do you really really want to use LIs for this? If it means creating 'dummy' lis, or javascript, or custom CSS classes, I would start looking at other possibilities. The point of an LI (to my mind) is NOT managing the numbering yourself. If you have to manage the numbers yourself, then you're only using LI to manage the style - how about creating your own style and just sticking your numbers in a or something?

Benjol 2009-06-15 07:07:10

that's actually not that crazy....

nickf 2009-06-15 07:27:52

@nickf, sorry I changed my answer. I believe your comment is still valid, but you might not!

Benjol 2009-06-15 13:19:14

thanks for taking the extra time on this question. You make a good point - the situation has diverged somewhat from the original semantic purpose of using a list. The reason I particularly want to use an OL though, is for the ease of styling. All the margins are set up and working. Fudging things like list-style-position using divs isn't my idea of fun.

nickf 2009-06-18 01:07:24

CSS hell, I know it well...

Benjol 2009-06-18 05:30:20

Answer 4

+1 A:

Deprecated HTML way

<ol>
   <li>List item 1</li>
   <li VALUE=5 TYPE="A">List item E</li>
   <li>List item 3</li>
</ol>

CSS way

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
ol { 
    counter-reset:item; 
 }
li {
    display:block; 
 }
li:before { 
    content:counter(item) '. '; 
    counter-increment:item; 
 }
#new_number {
    counter-reset:item 24;
 }
</style>

<!--[if IE]>
<script type="text/javascript">
window.onload=function() {
   document.getElementById('new_number').value='25';
 }
</script>
<![endif]-->

</head>
<body>

<ol>
  <li id="new_number">list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>

</body>
</html>

eed3si9n 2009-06-15 07:07:23

Answer 5

+2 A:

For example -

<ol id="reverse_numbering">
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
</ol>

This is something you can do -

<script type="text/javascript">
    var reverse = $('reverse_numbering');
    reverse.style.listStyle='none';
    var li = reverse.getElementsByTagName('li');
    for(var i=0; i<li.length; i++) {
        li[i].insertBefore(document.createTextNode(li.length-i+'. '), li[i].firstChild);
    }
</script>

Reference: HTML Help Forums.

Kirtan 2009-06-15 07:09:18

Answer 6

A:

I think this problem starts from semantics (wich, you know, is one of the pillars of creating standard-based pages): You want to use an ordered list to represent an unordered one.

My suggestions:

1) Use a ul and add images with numbers based on classes (this can be done programatically and you only have to generate the number images once, plus it gives you styling options)

2) Use a definition list. I know its stretching semantics a little bit but if the "term" (dt) is "Horizontal" and the definitions (dd) are the crossword's options I think it becomes semantic. Using this you can add the numbers you want and style them using whichever tag you like.

Hope this helps.

jluna 2009-06-15 08:59:49

I disagree that the list is unordered. It's in ascending order, and the fifth item in the list is the fifth horizontal or vertical word in the puzzle. It's just that the number of each word isn't consecutive.

nickf 2009-06-15 12:28:25

Mmmh I hadn't understood that originally so I stand corrected :) I kept thinking about the issue and I think going with a <dl> would be the most "degradable". It would be semantically sound and it would show the content would be accesible and understandable to any user agent or browser (javascript capable or not)... the downside is if the list is generated manually.

jluna 2009-06-19 08:13:58

Answer 7

A:

It's actually even easier than you think. What you're doing is basically "pausing" a list so you can insert something. When you do this in text you use the <div> tag. (Bells ringning now?")

CSS ...

/* This style removes the indentation that <ol> creates. In my document it was 30pt */
.pauselist {margin-left:-30pt;}

XHTML
...
Text
Text
<ol>
<li>Item 1</li>
<li>Item 2
<div class="pauselist">
Text
Text
Text

</div>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Text
Text

------ Results ---------
Text
Text

  1. Item 1
  2. Item 2

Text
Text
Text

  3. Item 3
  4. Item 4

Text
Text

SimTech 2010-10-04 18:56:54

That's more than a bit hacky, and doesn't even solve the problem (where the list might go like this: `Item 2, Item 4, Item 9`)

nickf 2010-10-05 08:03:15

ansaurus

tags:

views:

answers:

Change the numbering on an ordered list?

related questions