Autonumber headings and ordered lists

Posted by gerdami on 1259408541|%e %b %Y|agohover, last edited by James Kanjo on 1273383041|%e %b %Y at %H:%M |agohover

Tags: autonumber css heading list

rating: +6+x

Background

This HowTo is supposed to supplement the "Faked numbered (span) list" section of howto:embelish-text:examples

Unfortunately this technique does not work with IExplorer
- gerdami -

Autonumber headings and ordered lists

Autonumbered headings

In order to have autonumbered headings, you should add the following CSS code to your custom theme:

.heading_numbered { counter-reset: h1; }                 
/* mind that Site title is h1 ... */
h1 {counter-increment: h1; counter-reset: h2; } 
h2 {counter-increment: h2; counter-reset: h3; } 
h3 {counter-increment: h3; counter-reset: h4; } 
h4 {counter-increment: h4; counter-reset: h5; } 
h5 {counter-increment: h5; counter-reset: h6; } 
h6 {counter-increment: h6;  } 
/* usage: enclose content with div class="heading_numbered" */ 
.heading_numbered h1:before {content:counter(h1)") "; }
.heading_numbered h2:before {content:counter(h1)"."counter(h2)") "; }
.heading_numbered h3:before {content:counter(h1)"."counter(h2)"."counter(h3)") "; }
.heading_numbered h4:before {content:counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)") "; }
.heading_numbered h5:before {content:counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"."counter(h5)") "; }
.heading_numbered h6:before {content:counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)"."counter(h5)"."counter(h6)") "; }

The counter h1 is reset at the beginning of the div.
When a heading h1, "+ " in wikidot syntax, is encountered the counter h1 is incremented by one and the counter h2 is reset.
"h1:before" indicates that a content, in this case a counter, will be inserted before the heading label.

But this is not enough. You must enclose the part of the text to be autonumbered into a div:

[[div class="heading_numbered"]]
...
[[/div]]

If you don't use a class, the Site title would be prepended by "1)".
In this HowTo I inserted the div class="heading_numbered" after the Background heading.
At the bottom I inserted again this div class="heading_numbered" and the headings counters are reset.

Nested numbered lists

The numbered lists use the same counter reset and increment technique but only one nested counter is used:

ol { counter-reset: item; list-style-type: none; }
ol li { margin-top:0.5em; counter-increment: item; }
/* usage: enclose content with div class="list_numbered list_noindent" or class="list_numbered list_indent" */
.list_numbered ol li:before { content: counters(item, ".") ". "; }
.list_indent ol {margin-left:0; padding-left:1.5em; }
.list_noindent ol {margin-left:0; padding-left:0; }

I have defined several classes:
  • "list_numbered" to prevent list numbering when not needed.
  • "list_indent" to control the indentation
  • "list_noindent" with left margin & padding set to zero

I have used margin-top:0.5em to insert blank space between list items
Pay attention to counters(item, ".")

Indented lists

Usage: enclose the part of text to be numbered by

[[div class="list_numbered list_indent"]]
# list item
 # list item
 # list item
[[/div]]

Example:

  1. Etiam iaculis ultrices tortor at scelerisque. Praesent suscipit, orci ut fringilla viverra, magna lectus sagittis tellus, nec commodo dolor orci nec nunc. Suspendisse potenti.
    1. Praesent at leo eget enim commodo commodo. Sed condimentum arcu fringilla nunc feugiat vel interdum nisi aliquam. Vestibulum eleifend varius sapien, in ullamcorper magna pellentesque id. Curabitur luctus, tortor et vulputate euismod, magna elit dignissim odio, sagittis tristique tortor dolor ac lectus.
    2. Aenean semper placerat malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eget erat vitae tortor molestie auctor.
  2. Etiam iaculis ultrices tortor at scelerisque.
      1. In hac habitasse platea dictumst.
      2. Aliquam laoreet suscipit massa at viverra.
    2. Nulla rhoncus enim eget leo sodales pretium. Aliquam erat volutpat. Curabitur dapibus, risus scelerisque gravida lacinia, leo leo consectetur orci, quis condimentum justo tellus vel quam. Ut non metus ac purus rutrum auctor.

Left aligned lists

Usage: enclose the part of text to be numbered by

[[div class="list_numbered list_noindent "]]
# list item
 # list item
 # list item
[[/div]]

Example:

  1. Etiam iaculis ultrices tortor at scelerisque. Praesent suscipit, orci ut fringilla viverra, magna lectus sagittis tellus, nec commodo dolor orci nec nunc. Suspendisse potenti.
    1. Praesent at leo eget enim commodo commodo. Sed condimentum arcu fringilla nunc feugiat vel interdum nisi aliquam. Vestibulum eleifend varius sapien, in ullamcorper magna pellentesque id. Curabitur luctus, tortor et vulputate euismod, magna elit dignissim odio, sagittis tristique tortor dolor ac lectus.
    2. Aenean semper placerat malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eget erat vitae tortor molestie auctor.
  2. Etiam iaculis ultrices tortor at scelerisque.
      1. In hac habitasse platea dictumst.
      2. Aliquam laoreet suscipit massa at viverra.
    2. Nulla rhoncus enim eget leo sodales pretium. Aliquam erat volutpat. Curabitur dapibus, risus scelerisque gravida lacinia, leo leo consectetur orci, quis condimentum justo tellus vel quam. Ut non metus ac purus rutrum auctor.

Another example:

  1. item counter
    1. has been reset automatically
    2. because list items cannot not be separated by blank lines

Remarks

about the technique

  • In the example above classes have been combined to produce either indent or no indent
  • h1, h2, … and list item counters are independent
  • h1, h2,… are arbitrary counter names chosen by me; for clarity I might have used c1, c2,…
  • counters might be reset to -1 (for those who like starting numbering by 0) or any other value
  • counter increments might be negative
  • It might be possible to produce a,b,c or i,ii,iii, or A,B,C nested lists but I leave this to others

about browser compatibility

  • Works with Firefox 3.5
  • Does not work with IExplorer 6.0, 8.0

References

Backlinks

Author

gerdamigerdami. Please visit his/her userPage.

License

This HowTo is licensed under Creative Commons Attribution 3.0.

heading1 has been reset to 1.

heading2

heading2

heading1

Other(!) HowTos posted by gerdami

Page tags: autonumber css heading list
page revision: 12, last edited: 09 May 2010 05:30
EditRate (+6)TagsDiscuss (15) History Files Print Site tools+ Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.