Posted by gerdami on 28 Nov 2009 11:42, last edited by James Kanjo on 09 May 2010 05:30
Tags: autonumber css heading list
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:
- Etiam iaculis ultrices tortor at scelerisque. Praesent suscipit, orci ut fringilla viverra, magna lectus sagittis tellus, nec commodo dolor orci nec nunc. Suspendisse potenti.
- 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.
- Aenean semper placerat malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eget erat vitae tortor molestie auctor.
- Etiam iaculis ultrices tortor at scelerisque.
-
- In hac habitasse platea dictumst.
- Aliquam laoreet suscipit massa at viverra.
- 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:
- Etiam iaculis ultrices tortor at scelerisque. Praesent suscipit, orci ut fringilla viverra, magna lectus sagittis tellus, nec commodo dolor orci nec nunc. Suspendisse potenti.
- 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.
- Aenean semper placerat malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam eget erat vitae tortor molestie auctor.
- Etiam iaculis ultrices tortor at scelerisque.
-
- In hac habitasse platea dictumst.
- Aliquam laoreet suscipit massa at viverra.
- 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:
- item counter
- has been reset automatically
- 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
- http://www.w3.org/TR/CSS2/generate.html#counters
- http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/
- http://www.w3schools.com/Css/css_list.asp
- http://community.wikidot.com/forum/t-15212/how-to-customize-list-nesting-in-numbered-lists#post-38775
Backlinks
Author
gerdami. Please visit his/her userPage.
License
This HowTo is licensed under Creative Commons Attribution 3.0.
Gerdami! This is AMAZING! I didn't know you could do this with CSS!!!!!
WOW!
This has me so excited, that I'm going to shower you with exclamation marks!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Have some more:
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
What was amazing from you is that you rated it up just one minute after I had finished uploading my HowTo. Thanks, Jacob Black!
I may be as fast as him, but I'm not nearly as good looking as he is =D
You're a Twilight fan, I gather?
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
No I haven't a clue of what Twilight is.
I am stuck to The prisoner.
them bones
them bones
them
dry bones :-)
Rover!
Please translate immediately or I invoke the WCPGs ;-)
yes yes, i know its off topic… james started it :-)
Who is number one?
You are number six.
I am a free man :-))))))
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Ah so the divorce came through then.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
OH! I think I get it Phil… those “bones” are a reference to my exclamation marks, are they?
@ gerdami, you're not a fan of Twilight? Then what did you mean by the reference to Jacob Black?
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
Because YOU made the reference at the Tribal Council.
Err, no I didn't…
<rereads post>
err
<thinks>
OH! No no, my exclamation marks wasn't a reference to the WCPG, it was a literal gift of exclamation of excitement!
God, I should be banned from using exclamation marks, whenever I use them, it gives the total wrong message!
λ James Kanjo
Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript
I got notification of this page by email, I clicked on the link an got the page… NICE JOB. I wanted to say this in a comment… but I dont get that possibility. I got notifications of other people posting comments… GRRR I thought why can't I post and where do these people post this… After some searching I trimmed some URL and got here… why can't I see the comment on the page itself? The links in the email notification got to the page and there is nothing to see of the comments
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
Because the module [[Comments]] is not set in the howto:_template.
It's amazing :) that's why I love wikidot. 2bad it ain't in dutch most of the time so it takes a while to read and understand sometimes…