Table des matières en CSS

Ce script permet de construire une table des matières numérotée et paginée.

Toute la magie de l'exercice repose sur l'utilisation des propriétés counter-xxx disponible depuis CSS 2.1 et du sélecteur :before.

Les balises CSS utiles

Toute la magie de l'exercice repose sur l'utilisation des propriétés counter-xxx disponible depuis CSS 2.1 et du sélecteur :before.


counter-reset
Permet d'initialiser un ou plusieurs compteurs et de le nommmer par une variable. Par défaut l'initialisation débute à 0, mais il est possible de choisir le nombre de départ.
counter-increment
Permet d'incrémenter un compteur spécifié par son nom de variable. L'incrément par défaut est 1, mais il est personnalisable.
counter(xxx)
La valeur du compteur. Le deuxième paramètre permet de spécifier un format d'affichage : upper-latin, upper-roman, etc. (liste complète ici).

xxx:before
Permet de définir un format d'affichage précis, notamment avec l'attribut content.

Les attributs counter-xxx sont applicables à pratiquement tous les types de balise : dt, dd, ul, ol, li, p, h, etc. ce qui rend leur usage particulièrement versatile.

Le code CSS

                                            
                                                <style>
                                                
                                                /* Définitions génériques */
                                                ol, li {
                                                    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                                                }
                                                ol span {
                                                    float: right;
                                                    margin-right: 10px;
                                                }
                                                
                                                /* Niveau 1 */
                                                ol {
                                                    counter-reset: niv1; /* Initiate a counter */
                                                    margin-left: 0;
                                                    padding-left: 0;
                                                }
                                                
                                                ol li {
                                                    margin: 1.5em 0 1em 0;
                                                    list-style: none;
                                                    border-bottom: 2px solid #333;
                                                    padding: 4px 4px 4px 0px;
                                                    font-weight: bold;
                                                    background: #999;
                                                    color: #fff;
                                                }
                                                
                                                ol li:before {
                                                    content: "Section " counter(niv1, upper-roman);
                                                    counter-increment: niv1;
                                                    padding: 4px 8px 4px 4px;
                                                    margin-right: 4px;
                                                    background: #333;
                                                    color: #fff;
                                                }
                                                
                                                /* Niveau 2 */
                                                ol ol {
                                                    counter-reset: niv2; /* Initiate a counter */
                                                    margin-left: 20px;
                                                    padding-left: 0;
                                                }
                                                ol ol li {
                                                    margin: 1em 0 0.6em 0;
                                                    list-style: none;
                                                    border-bottom: 1px solid #aaa;
                                                    font-weight: normal;
                                                    background: none;
                                                    color: #000;
                                                }
                                                ol ol li:before {
                                                    content: "Chapitre " counter(niv1, upper-roman) "." counter(niv2, upper-latin) ".";
                                                    counter-increment: niv2;
                                                    padding: 4px 4px 4px 4px;
                                                    margin-right: 4px;
                                                    background: none;
                                                    color: #333;
                                                }
                                                
                                                /* Niveau 3 */
                                                ol ol ol {
                                                    counter-reset: niv3; /* Initiate a counter */
                                                    margin-left: 20px;
                                                    padding-left: 0;
                                                }
                                                ol ol ol li {
                                                    margin: 0.5em 0 0em 0;
                                                    list-style: none;
                                                    border-bottom: none;
                                                    font-size: 0.9em;
                                                }
                                                ol ol ol li:before {
                                                    content:  counter(niv1, upper-roman) "." counter(niv2, upper-latin) "." counter(niv3) ".";
                                                    counter-increment: niv3;
                                                    padding:4px;
                                                    margin-right:8px;
                                                }
                                                
                                                /* Niveau 4 */
                                                ol ol ol ol {
                                                    counter-reset: niv4; /* Initiate a counter */
                                                    margin-left: 20px;
                                                    padding-left: 0;
                                                }
                                                ol ol ol ol li {
                                                    margin: 0;
                                                    list-style: none;
                                                    border-bottom: none;
                                                    font-size: 0.8em;
                                                }
                                                ol ol ol ol li:before {
                                                    content:  counter(niv1, upper-roman) "." counter(niv2, upper-latin) "." counter(niv3) "." counter(niv4) ".";
                                                    counter-increment: niv4;
                                                    padding:4px;
                                                    margin-right:8px;
                                                }
                                                
                                                </style>
                                            
                                        

Exemple de mise en œuvre

                                            
                                                <html>
                                                    <head>
                                                        <!--
                                                            Placer ici les définitions de style
                                                        -->
                                                    </head>
                                                    
                                                    <body>
                                                        <ol>
                                                            <li>Niveau 1</li>
                                                                <ol>
                                                                    <li>Niveau 2<span>10</span></li>
                                                                        <ol>
                                                                            <li>Niveau 3<span>10</span></li>
                                                                                <ol>
                                                                                    <li>Niveau 4<span>10</span></li>
                                                                                    <li>Niveau 4<span>11</span></li>
                                                                                    <li>Niveau 4<span>12</span></li>
                                                                                    <li>Niveau 4<span>13</span></li>
                                                                                </ol>
                                                                            <li>Niveau 3<span>13</span></li>
                                                                                <ol>
                                                                                    <li>Niveau 4<span>14</span></li>
                                                                                    <li>Niveau 4<span>15</span></li>
                                                                                    <li>Niveau 4<span>16</span></li>
                                                                                    <li>Niveau 4<span>17</span></li>
                                                                                </ol>
                                                                            <li>Niveau 3<span>18</span></li>
                                                                            <li>Niveau 3<span>19</span></li>
                                                                        </ol>
                                                                    <li>Niveau 2<span>20</span></li>
                                                                        <ol>
                                                                            <li>Niveau 3<span>21</span></li>
                                                                            <li>Niveau 3<span>22</span></li>
                                                                            <li>Niveau 3<span>23</span></li>
                                                                            <li>Niveau 3<span>24</span></li>
                                                                        </ol>
                                                                </ol>
                                                            <li>Niveau 1</li>
                                                                <ol>
                                                                    <li>Niveau 2<span>25</span></li>
                                                                    <li>Niveau 2<span>26</span></li>
                                                                </ol>
                                                        </ol>
                                                    </body>
                                                </html>