DecimalOutlineListsAndHeadings

Summary: Decimal Outline Lists and Headings
Version: 1.0
Prerequisites: CSS2
Status: Stable
Maintainer: ccox
License: CC0
Categories: CSS
Users: (view? / edit)

Questions answered by this recipe

How can I have an ordered list using numbers like 1, 2, 2.2, 2.3, 2.3.1, etc.?

How can I have headings using numbers like 1, 2, 2.2, 2.3, 2.3.1, etc.?

Installation

For Lists

Add the following to your pub/local.css (or the css for your skin):

 
/* Decimal section outine list */
.decimaloutlinelist ol {
  counter-reset: dsection;
  list-style-type: none;
}

.decimaloutlinelist li::before {
  counter-increment: dsection;
  content: counters(dsection,".") " ";
}

 

For Headings

You will need both some CSS and some changes to your config.php.

Add the following to your pub/local.css (or the css for your skin):

 
/* Decimal section outline via headings */
.decimaloutlineheadings h1 {counter-reset: h2}
.decimaloutlineheadings h2 {counter-reset: h3}
.decimaloutlineheadings h3 {counter-reset: h4}
.decimaloutlineheadings h4 {counter-reset: h5}
.decimaloutlineheadings h5 {counter-reset: h6}
.decimaloutlineheadings h2:before {counter-increment: h2; content: counter(h2) ". "}
.decimaloutlineheadings h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
.decimaloutlineheadings h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
.decimaloutlineheadings h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
.decimaloutlineheadings h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
.decimaloutlineheadings h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }
 

Then add the following to your config.php:

 
# we can apply class=nocount in particular to exempt headings under decimaloutlineheadings class
$WikiStyleApply['h2'] = 'h2';
$WikiStyleApply['h3'] = 'h3';
$WikiStyleApply['h4'] = 'h4';
$WikiStyleApply['h5'] = 'h5';
$WikiStyleApply['h6'] = 'h6';
 

Usage

For lists:

 
>>decimaloutlinelist<<
# Numbered List
# Second Item
## Sub Item
### Sub Sub Item
### Second Sub Sub Item \\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\\
\\
%lfloat%http://pmichaud.com/img/misc/pc.jpg%% \\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
## Second Sub Item
>><<
 

For headings:

 
>>decimaloutlineheadings<<
! Paper Title (a first level heading, required!)
!! Second Level Heading
Here is some content.
(:include PmWiki/PmWiki:)
!!! Third Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!! Another Second Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!! %apply=h2 class=nocount% What's this... oh... exempt this Second Level Heading
!!! Third Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!!! Another Third Level Heading
More content.
!!!! Forth Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!!!! Another Forth Level Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
!!!!! Fifth Level Heading (can't go lower)
!!!!!! Ok, I Lied, but this is as deep as it goes!!
!!!!!! Sorry, no more...
!!! Back to Third Level Heading
!! Back to Second Level Heading
>><< 
 

Notes

The headings version was created for long documents that would be hard to do with a list.

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

Comments

See discussion at DecimalOutlineListsAndHeadings-Talk?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.