Autonumber headings and paragraphs

Posted by gerdami on 28 Nov 2009 15:07, last edited by GoVegan on 09 May 2010 05:30

Tags: autonumber heading list paragraph

rating: +2+x

Another autonumbering technique

Introduction which is not numbered…
This HowTo is a complement to the HowTo:autonumber-headings-and-ordered-lists.
The following CSS code allows to number paragraphs continuously and independently of headings which are numbered upper-roman, upper-alpha and lower-roman.
The continuous numbered paragraph is style used by some judgments…

/* usage: enclose content with div class="heading_I_A_i" */ 
.heading_I_A_i h1:before {content:counter(h1, upper-roman)".- "; }
.heading_I_A_i h2:before {content:counter(h1, upper-roman)"."counter(h2, upper-alpha)".- "; }
.heading_I_A_i h3:before {content:counter(h1, upper-roman)"."counter(h2, upper-alpha)"."counter(h3, lower-roman)".- "; }
 
/* Autonumbered paragraphs */
 
.paragraph_numbered { counter-reset: p; }
.paragraph_numbered P { counter-increment: p; }   
.paragraph_numbered P:before { content: counter(p, decimal-leading-zero)". " }

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh at velit ultrices imperdiet. Nulla molestie eleifend placerat. Curabitur fermentum porttitor massa, gravida vulputate tortor fermentum vel.

Sed malesuada tincidunt turpis, id suscipit massa tempus in. Integer vitae odio ac nulla molestie ornare eget nec turpis. Duis tellus nulla, pellentesque ac porttitor non, pulvinar et est.

Heading 2

Praesent dictum arcu nec nisi lobortis cursus vitae ac sapien. Nulla adipiscing, neque at ultrices egestas, ante orci malesuada mi, ut laoreet dui dui in neque. Phasellus sit amet ligula justo, et condimentum eros.

Heading 3

Sed pharetra ipsum non libero aliquet gravida egestas nisl luctus. Curabitur sem tellus, adipiscing at dignissim id, egestas a lacus. Vivamus adipiscing ante et augue posuere commodo. Suspendisse nec lectus ipsum, ullamcorper consequat massa.

Heading 3

Mauris at est libero. Suspendisse blandit lacus in massa mollis imperdiet. Mauris dolor dui, ultricies quis bibendum ac, feugiat vel eros. Aliquam ultricies lacinia ipsum sodales posuere. Sed feugiat elit accumsan lorem aliquet egestas. Ut at arcu tortor. Aliquam erat volutpat.

Heading 1

Sed facilisis, nulla in interdum scelerisque, lacus turpis commodo nunc, in bibendum velit libero hendrerit sapien. Phasellus viverra, tortor id sagittis eleifend, erat libero viverra augue, ac dictum elit augue ut nibh. Sed nec egestas nulla. Fusce varius fringilla vehicula.

Code of this page

[[div class="heading_I_A_i"]]
Introduction which is not numbered...
This HowTo is a complement to the HowTo:[[[howto:autonumber-headings-and-ordered-lists]]].
The following CSS code allows to number paragraphs continuously and independently of headings which are numbered upper-roman, upper-alpha and lower-roman.
The continuous numbered paragraph is style used by some judgments...  

+ Heading 1
[[div class="paragraph_numbered"]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nibh at velit ultrices imperdiet. Nulla molestie eleifend placerat. Curabitur fermentum porttitor massa, gravida vulputate tortor fermentum vel. 

Sed malesuada tincidunt turpis, id suscipit massa tempus in. Integer vitae odio ac nulla molestie ornare eget nec turpis. Duis tellus nulla, pellentesque ac porttitor non, pulvinar et est. 
++ Heading 2
Praesent dictum arcu nec nisi lobortis cursus vitae ac sapien. Nulla adipiscing, neque at ultrices egestas, ante orci malesuada mi, ut laoreet dui dui in neque. Phasellus sit amet ligula justo, et condimentum eros. 
+++ Heading 3
Sed pharetra ipsum non libero aliquet gravida egestas nisl luctus. Curabitur sem tellus, adipiscing at dignissim id, egestas a lacus. Vivamus adipiscing ante et augue posuere commodo. Suspendisse nec lectus ipsum, ullamcorper consequat massa.
+++ Heading 3
Mauris at est libero. Suspendisse blandit lacus in massa mollis imperdiet. Mauris dolor dui, ultricies quis bibendum ac, feugiat vel eros. Aliquam ultricies lacinia ipsum sodales posuere. Sed feugiat elit accumsan lorem aliquet egestas. Ut at arcu tortor. Aliquam erat volutpat. 
+ Heading 1
Sed facilisis, nulla in interdum scelerisque, lacus turpis commodo nunc, in bibendum velit libero hendrerit sapien. Phasellus viverra, tortor id sagittis eleifend, erat libero viverra augue, ac dictum elit augue ut nibh. Sed nec egestas nulla. Fusce varius fringilla vehicula.

[[/div]][[/div]]

Author

gerdamigerdami. Please visit his/her userPage.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.