How to create HTML/CSS ordered lists for Sections of a document?

July 2, 2013 12:23 PM

I am looking for a method of displaying a list item's parent number in a list with nested sublists, in the way sections of a document would be displayed. Example:

...
8. Defining Custom Counter Styles: the ‘@counter-style’ rule 
8.1. Counter algorithms: the ‘type’ descriptor 
8.1.1. repeating 
8.1.2. numeric 
...

I'd like to use only the ol and li tags and CSS styling, but HTML lists will only display the number of the current node. Thoughts?

Current node example:

...
7. Using Content as Markers: the ‘marker’ value for ‘display’ 
8. Defining Custom Counter Styles: the ‘@counter-style’ rule 
           1. Counter algorithms: the ‘type’ descriptor 
                      1. repeating 
                      2. numeric 
...

As you can see by my examples, I've been to CSS Lists and Counters Module Level 3 - which defines the spec, but if you view source of the Table of Contents (TOC) on that page, you will see that the numbers in the TOC are hard-coded into the HTML, which leads me to the conclusion that there isn't a way to do it without some js/Jquery.

It seems to me that this function should be included in the specification of ordered lists. And who is to say it shouldn't also be in the specification of unordered lists?

Thank You for your time

posted by Monkey0nCrack to Technology (4 answers total)

Best answer: relevant jsfiddle
posted by jsturgill at 12:33 PM on July 2, 2013 [11 favorites]

You could do it with CSS and HTML if you used background images for the list items (e.g. image of "1.", image of "2.", etc.) instead of showing the standard bullets/numbers, but it wouldn't be fun getting everything to line up.
posted by bricoleur at 12:59 PM on July 2, 2013

Best answer: I haven't tried it myself, but here's a couple of examples of how to do it using nested lists and the counter and content CSS properties.

And I agree, this should be in the spec as list-style: legal or something like that.
posted by clearlydemon at 1:26 PM on July 2, 2013

jsturgill, impressive! I wanted to play around with it and added indentation and some longer text. I'm not sure if it's what Monkey0nCrack wanted, but it was cool to me: http://jsfiddle.net/artlung/A5ELr/.

CSS:

div {
    margin: 1em;
}
ol {
    counter-reset: item; 
}
li { display: block }
li:before {
    content: counters(item, ".") ". \00a0\00a0";
    counter-increment: item
}
li {
    margin: 0;
}
li li {
    margin: 0 0 0 1em;
}
li li li {
    margin: 0 0 0 0.50em;
}
li li li li {
    margin: 0 0 0 1em;
}

HTML:

<div>
<ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
  </li>
  <li>three
  <ol>
   <li>three.one</li>
   <li>three.two
    <ol>
     <li>three.two.one
         <ol>
             <li>three.two.one.one ... Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pulvinar sem libero, id gravida lacus convallis quis.
Vivamus hendrerit enim dolor, mollis congue arcu volutpat eget. Aenean
 placerat diam nibh, nec dictum justo viverra nec. Etiam sagittis at quam
 a pulvinar. Curabitur quis justo velit. Sed ullamcorper, mi sit amet
volutpat posuere, quam lectus consectetur quam, bibendum scelerisque
tortor sapien convallis dolor. Sed pellentesque, eros eget faucibus ultrices,
 ipsum est ultricies felis, eu ullamcorper mauris neque ac ligula. Morbi at
 lorem feugiat nisi aliquam pellentesque. Nam tempor libero felis, a l
acinia risus facilisis in. Curabitur elementum eros nec nisi rutrum, id 
elementum sapien lobortis. In rhoncus auctor ornare.</li>
             <li>three.two.one.two</li>
             <li>three.two.one.three</li>
         </ol>
        </li>
     <li>three.two.two</li>
    </ol>
      </li>
   </ol>
   </li>  
  <li>four</li>
  </ol> 
</div>

posted by artlung at 8:08 AM on July 4, 2013