2.1.10N’éloignez pas trop les éléments apparentés
“Les listes, comme les tables de matières ou recettes, sont des occasions de construire des structures dans lesquelles l’espacement d’éléments sépare autant qu’il assemble. Les deux manières les plus récurrentes de passer à côté d’une telle opportunité sont d’augmenter l’espace à un tel point que l’œil ne peut plus faire le lien sans l’aide de la main, et de placer des lignes de points qui forcent l’œil à parcourir toute la largeur de la page comme un prisonnier qu’on amène à sa cellule.”
La solution des lignes de point à laquelle se réfère Bringhurst est la présentation par défaut de la table des matières dans Microsoft Word. Heureusement, ce type de mise en page est assez compliqué à mettre en place à l’aide des CSS, et il est très rare d’en croiser sur le web. Bringhurst présente alors deux alternatives de mise en page pour les tables de matières qui sont reproduites ici:
Exemple 1 – Table des matières alignée à droite
| Introduction | 7 |
|---|---|
| Chapter 1 The Sex of Centaurs | 11 |
| Chapter 2 Poliphilo’s Dream | 11 |
Comme il s’agit d’une table de contenu, l’intégration se fait avec une simple table :
<table>
<tr><th>Introduction</th><td>7</td></tr>
<tr><th>Chapitre <strong>1</strong> Le sexe
des Centaures</th>
<td>11</td></tr>
<tr><th>Chapitre <strong>2</strong> Le rêve
de Poliphilo</th>
<td>11</td></tr>
</table>La CSS se présente comme suit :
table {
margin: 0 3em 0 auto;
}
th {
font-weight: normal;
text-align: right;
padding: 0;
}
td {
font-style: italic;
text-align: right;
padding: 0 0 0 0.5em;
}
Cette CSS est assez évidente, mais il est utile de s’arrêter sur la déclaration des margin de la table elle-même. Il y a une margin droite de 3em pour positionner la table légèrement à l’intérieur du bord droit de la page, et une margin gauche auto pour pousser la table vers le côté droit de la page.
Exemple 2 – Table des matières centrée
| Prologue | page 5 |
|---|---|
| Points d’accords possibles | page 9 |
| Points de désaccord | page 11 |
| Conclusion | page 163 |
| Index | page 164 |
Une fois de plus, une table a été utilisée pour le contenu :
<table>
<tr>
<th>Prologue</th>
<td>page 5</td>
</tr>
<tr>
<th>Points d’accords possibles</th>
<td>page 9</td>
</tr>
<tr>
<th>Points de désaccord</th>
<td>page 11</td>
</tr>
<tr>
<th>Conclusion</th>
<td>page 163</td>
</tr>
<tr>
<th>Index</th>
<td>page 164</td>
</tr>
</table>
La CSS se présente comme suit :
table {
margin: 0 auto;
}
th {
font-weight: normal;
text-align: right;
padding: 0 0.5em 0 0;
}
td:before {
content:”\2022”;
padding-right: 0.5em;
}
td {
font-style: italic;
text-align: left;
padding: 0;
}
Quelques remarques sur cette CSS. La table a été centrée en donnant la valeur auto aux margin gauche et droite. Pour des éléments blocs, une déclaration de width serait requise pour appliquer cette technique, mais les tables ayant une width inhérente, nous pouvons nous en passer dans ce cas.
Les points séparant les titres des chapitres et le numéro de page ont été générés par la feuille de style CSS. Une puce ( caractère Unicode 2022) a été inséré avant l’élément td. Le contenu généré de telle sorte n’est pas supporté par Internet explorer 6 ou 7, donc une alternative marchant avec tous les navigateurs serait d’écrire cette puce – • – dans le code HTML lui-même.