DokuWiki

It's better when it's simple

User Tools

Site Tools


tips:numbered_headings

Numbered headings per CSS only

Here follows the CSS only approach for numbered headings (see the numberedheadings plugin for a different approach).

The following CSS code will number all headlines of your wiki content, as well as their TOC counterpart. Put it either in one of your template's CSS files (and a second time in your print.css, if you want the numbers to be printable) or in a userstyle.css in your ./conf directory (or userall.css if it should also be used for the print version):

userstyle.css
.dokuwiki .page {counter-reset: level1;}
.dokuwiki #dw__toc:before, .dokuwiki #dw__toc:after {counter-reset: level1; content: "";}
.dokuwiki #dw__toc h3:before{content: ""}
 
.dokuwiki .page h1, .dokuwiki ul.toc li.level1 {counter-reset: level2;}
.dokuwiki .page h2, .dokuwiki ul.toc li.level2 {counter-reset: level3;}
.dokuwiki .page h3, .dokuwiki ul.toc li.level3 {counter-reset: level4;}
.dokuwiki .page h4, .dokuwiki ul.toc li.level4 {counter-reset: level5;}
.dokuwiki .page h5, .dokuwiki ul.toc li.level5 {}
 
.dokuwiki .page h1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: counter(level1) " ";
    counter-increment: level1;
}
.dokuwiki .page h2:before,
.dokuwiki ul.toc li.level2 a:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;
}
.dokuwiki .page h3:before,
.dokuwiki ul.toc li.level3 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) " ";
    counter-increment: level3;
}
.dokuwiki .page h4:before,
.dokuwiki ul.toc li.level4 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " ";
    counter-increment: level4;
}
.dokuwiki .page h5:before,
.dokuwiki ul.toc li.level5 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " ";
    counter-increment: level5;
}

This works for the default template. For other templates every occurence of .page should be substituted with the template's “content surrounding box” (probably “#content” or similar).

As of some chromium (?) update circa. June 2024 the numbering continues incrementing from the ToC onto the page body. This can be fixed by a change in the second line to use counter-set rather than counter-reset on the toc:before and :after. This does appear to be a chromium thing, Firefox works using set or reset.

Drawbacks

  • no restriction to certain pages (yet; could be done through another plugin; in the standard template it could at least be restricted by adding .mode_show)
  • The first h1 which kind of works as a page title is numbered

Edit to exclude the first h1 (page title) from numbering

userstyle.css
.dokuwiki .page {counter-reset: level1;}
.dokuwiki #dw__toc:before,
.dokuwiki #dw__toc:after {counter-reset: level1; content: "";}
.dokuwiki #dw__toc h3:before{content: ""}
 
.dokuwiki .page h1, .dokuwiki ul.toc li.level1 {counter-reset: level2;}
.dokuwiki .page h2, .dokuwiki ul.toc li.level2 {counter-reset: level3;}
.dokuwiki .page h3, .dokuwiki ul.toc li.level3 {counter-reset: level4;}
.dokuwiki .page h4, .dokuwiki ul.toc li.level4 {counter-reset: level5;}
.dokuwiki .page h5, .dokuwiki ul.toc li.level5 {}
 
.dokuwiki .page h1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: counter(level1) " ";
    counter-increment: level1;
}
.dokuwiki .page h1.sectionedit1:before,
.dokuwiki ul.toc li.level1:first-child a:before {
    content: none;
}
.dokuwiki .page h2:before,
.dokuwiki ul.toc li.level2 a:before {
    content: counter(level1) "." counter(level2) " ";
    counter-increment: level2;
}
.dokuwiki .page h3:before,
.dokuwiki ul.toc li.level3 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) " ";
    counter-increment: level3;
}
.dokuwiki .page h4:before,
.dokuwiki ul.toc li.level4 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) " ";
    counter-increment: level4;
}
.dokuwiki .page h5:before,
.dokuwiki ul.toc li.level5 a:before {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) " ";
    counter-increment: level5;
}

Rationale for edit

I use several h1s in my wiki so it doesn't “steal” one level from my TOC. I use the first h1 as the title of the page which I don't want to be numbered.

Drawbacks

  • If you have only one h1 and use h2, it will be numbered 0.1 in the document and not numbered at all in the TOC

In this case, you may use this variant of the CSS file (tested on Bootstrap3 theme)

userstyle.css
.dokuwiki .page {counter-reset: level1;}
.dokuwiki #dw__toc:before,
.dokuwiki #dw__toc:after {counter-reset: level1; content: "";}
.dokuwiki #dw__toc h3:before{content: ""}
 
.dokuwiki .page h1, .toc-body ul.toc li.level1 {counter-reset: level2;}
.dokuwiki .page h2, .toc-body ul.toc li.level2 {counter-reset: level3;}
.dokuwiki .page h3, .toc-body ul.toc li.level3 {counter-reset: level4;}
.dokuwiki .page h4, .toc-body ul.toc li.level4 {counter-reset: level5;}
.dokuwiki .page h5, .toc-body ul.toc li.level5 {}
 
.dokuwiki .page h1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: counter(level1) ". ";
    counter-increment: level1;
}
.dokuwiki .page h1.sectionedit1:before,
.dokuwiki ul.toc li.level1 a:before {
    content: none;
}
.dokuwiki .page h2:before,
.dokuwiki ul.toc li.level2 a:before {
    content: counter(level2) ". ";
    counter-increment: level2;
}
.dokuwiki .page h3:before,
.dokuwiki ul.toc li.level3 a:before {
    content: counter(level2) "." counter(level3) ". ";
    counter-increment: level3;
}
.dokuwiki .page h4:before,
.dokuwiki ul.toc li.level4 a:before {
    content: counter(level2) "." counter(level3) "." counter(level4) ". ";
    counter-increment: level4;
}
.dokuwiki .page h5:before,
.dokuwiki ul.toc li.level5 a:before {
    content: counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) ". ";
    counter-increment: level5;
}

Alternative

This may have been better achieved by using the PageTitle Plugin and the original style here, but then I would have to manually rename each page of my wiki.

The combo plugin used also a CSS approach with configuration

tips/numbered_headings.txt · Last modified: by 2a00:23c6:b318:1700:7059:14e0:e429:9534

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki