Documentation du Dr FRAPPE

Ce wiki regroupe les résultats de mes expériences en informatique accumulés au cours de mes recherches sur le net.

Dans la mesure du possible, j'ai cité mes sources ; il en manque certainement… :-)

Numérotation des titres par CSS uniquement (remplace numberedheadings)

Voici l'approche CSS pure pour la numérotation des titres.

Le code CSS qui suit numérote tous les titres du wiki, ainsi que ceux de la table des matières.

Placez-le dans l'un des CSS du répertoire user de votre thème (ainsi qu'à nouveau dans le print.css pour avoir la numérotation lors de l'impression)

/lib/tpl/THEME/user/screen.css
/* Numérotation automatique des titres via CSS 
https://philarcher.org/diary/2013/headingnumbers/ */
 
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}
 
h2:before {counter-increment: h2; content: counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
 
h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before, #dw__toc h3:before, #panel h5:before { content: ""; counter-increment: none }
 
/* Numérotation automatique de la table des matières (TOC) via CSS
https://www.freecodecamp.org/news/numbering-with-css-counters/ */
.dokuwiki #dw__toc ul ul {
  list-style-type: none;
  counter-reset: css-counters 0; /* intializes counter, set -1 for zero-based counters */
}
 
.dokuwiki #dw__toc ul ul li div.li:before {
  counter-increment: css-counters;
  content: counters(css-counters, ".") " "; /* generates inherited counters from parents */
}
 
/* Styles des titres */
div#content .dokuwiki h1,
div#content .dokuwiki h2 {
  font-weight: bold;
}
 
div#content .dokuwiki h3,
div#content .dokuwiki h4,
div#content .dokuwiki h5,
div#content .dokuwiki h6 {
  font-weight: normal;
}
 
div#content .dokuwiki h1 {
  font-size: 160%;
}
 
div#content .dokuwiki h2 {
  font-size: 140%;
}
 
div#content .dokuwiki h3 {
  font-size: 132%;
}
 
div#content .dokuwiki h4 {
  font-size: 116%;
}
 
div#content .dokuwiki h5 {
  font-size: 100%;
}
 
div#content .dokuwiki h6 {
  font-size: 80%;
}

Pré-requis

Installation

Configuration

Utilisation

Désinstallation

Voir aussi

QR Code
QR Code Numérotation des titres par CSS uniquement (remplace numberedheadings) (generated for current page)