4

I've been playing around a bit finding a way around the start attribute in ol elements.

As you may know, start has been declared deprecated in official standards like HTML 4.01 and XHTML 1.1, and the W3C hasn't bothered to explain to us how we can get by without it. Yes, it was undeprecated with HTML5, but still, the question remains.

There's Ordered Lists <OL>, Starting index with XHTML Strict? which explains nicely how to solve it. But only for numerical lists (with type="1"). How about the other types?

I've created a jsFiddle, and my question is, can it be done? Can you remove the start attribute and replace it with CSS so that the result looks the same as the original? Or did the W3C just have a brain fart the day they deprecated it?

Community
  • 1
  • 1
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • I'd never heard of `start` until now. I think perhaps, semantically speaking, that the attribute may be more appropriate than styling with CSS (as long as it works, of course). – Wesley Murch Mar 03 '12 at 14:03
  • Well, to be honest, they do have something of a point. For a list, it isn't really that important how the items are numbered. As long as they are! But the W3C wasn't thinking when they made this decision; they really should have suggested an alternative. The counter system is horrible. – Mr Lister Mar 03 '12 at 14:50

3 Answers3

2

You can specify a second parameter to the counter() in the content CSS property (specification):

ol.roman18 {
    margin: 1em 0;
    counter-reset: item 17; /* The first list item will start at 18, XVIII */
}
ol.roman18 li {
    margin: 0 0 0 4em;
}
ol.roman18 li:before {
    content: counter(item, upper-roman) '.';
    counter-increment: item;
    /* Alignment */
    position: absolute;
    margin-left: -3.5em;
    text-align: right;
    width: 3em;
}

PS. item is not a required name, it's just an identifier for the counter. If you wanted to, it can be replaced with ponies: http://jsfiddle.net/kRPDH/4/.

Demo: http://jsfiddle.net/kRPDH/6/

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • I've had this same thing sitting in a jsfiddle for 10 minutes now and can't figure out how to get it to actually look the same as OP's demo: http://jsfiddle.net/kRPDH/3/ The counter position specifically. I never use CSS counter properties, it's a bit lame that we have to use `:before` and cannot simply replace the bullet. – Wesley Murch Mar 03 '12 at 13:58
  • @Madmartigan I dee. I have encountered this issue before. I will update my answer to include alignment. – Rob W Mar 03 '12 at 14:04
  • I can think of a lot of CSS tricks for it, but nothing that's truly the exact same as a straight up list. The other answer's styles look right in the isolation of jsfiddle with no other content or styling, but it's still quite different. – Wesley Murch Mar 03 '12 at 14:06
  • @Madmartigan My updated answer includes a solution which looks equivalent to the OPs list. The numbers can be tweaked to get the desired result. – Rob W Mar 03 '12 at 14:10
  • Looks nice but it eventually breaks, as expected with any solution involving fixed-width: http://jsfiddle.net/kRPDH/7/ Looks good though, you have my vote. – Wesley Murch Mar 03 '12 at 14:16
  • @Madmartigan Sure, but the same is true for the original version. Try, for instance, `start="888"`. Even without any other styles (that is, not on jsFiddle with its massive reset stylesheet) it will overflow out of the window. – Mr Lister Mar 03 '12 at 14:45
  • You're right, I've never noticed that before either and I'm surprised. And then, `list-style-position:inside;` (the "fix") is pretty much the same as unstyled `:before` content. – Wesley Murch Mar 03 '12 at 14:54
2

I can suggest 4 ways for your problem 1. Change the doctype to transitional or HTML5(have good support) 2.Use js 3.Include the counter inside the li element itself(not desirable if the list is too long to handle in the page) 4.use css counters as many have suggested. Refer this for a detailed explanation http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/

Abhidev
  • 7,063
  • 6
  • 21
  • 26
  • Thanks for the different ideas and the link. However, I hope you understand that I must accept Rob's answer as the only correct one. There's no way I can't. – Mr Lister Mar 03 '12 at 14:37
0

try this fiddle: http://jsfiddle.net/Wvp2b/1/

juts add upper-romans as a second parameter to counter function and set your counter variable to 17

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177