“New” thing for today, I’ve been looking at doing outlined numbering for headings, like you do in various formal documents. For example:
1 Heading 1
1.1 Heading 2
1.1.1 Heading 3
184.108.40.206 Heading 4
Now doing this automatically is difficult, but in CSS, well CSS3, it can be done. Unfortunately not in IE7
Anyway, here is the basis of the code, the full CSS that does the above is under the “Cut” below.
The idea is very simple, for each heading, we maintain a “counter” within CSS to store the number. Before first use of the counter, you must “reset” it, so each enclosing level should “reset” the counter. Also each level needs it’s own counter.
So to kick the CSS off, let us assume we have a numbered page with a body:
This defines BODY element with a “numbered” class, that does a reset of the H1 counter. Next:
This defines a H1 element that does a reset of the H2 counter, and now for something different:
content: counter(mynum-h1) ” “;
Now, this defines a “before” style that is used before rendering the rest of the H1 “numbered” element. It has a content: statement that returns the current value of the counter mynum-h1 followed by a space (” “), which is the numbering that was reset by the BODY. The counters start from 1, just in case you were wondering. For the next level H2, we have:
content: counter(mynum-h1) “.” counter(mynum-h2) ” “;
This pattern repeats for each level of the H elements. The above will do the numbering of the H2 elements, starting from 1 which is reset after every H1. The output is the outer counter mynum-h1 then a period “.” then the counter for H2: mynum-h2. The H2 numbered element will also reset an H3 counter.