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 Centaurs11
Chapter 2 Poliphilo’s Dream11

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

Prologuepage 5
Points d’accords possiblespage 9
Points de désaccordpage 11
Conclusionpage 163
Indexpage 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.

Sommaire

  1. 2Rythme & proportion
    1. 2.1Horizontalement
      1. 2.1.1Définissez l'espace mot en fonction de la taille du caractère et de son interlettrage naturel
      2. 2.1.2Établissez une longueur de ligne confortable
      3. 2.1.3Choisissez la justification en fonction du texte et de la page
      4. 2.1.4Utilisez une valeur d’espace entre les phrases
      5. 2.1.5N’ajoutez pas - ou alors très peu - d’espace dans une suite d’initiales
      6. 2.1.6Espacez toutes les suites de capitales et petites capitales, ainsi que les longues suites de chiffres
      7. 2.1.7N’augmentez pas l’interlettrage des bas de casse sans raison
      8. 2.1.8Crénez de façon régulière et légère ou pas du tout
      9. 2.1.9N’altérez pas les largeurs, les formes ou les lettres sans raison
      10. 2.1.10N’éloignez pas de trop les éléments apparentés
    2. 2.2Verticalement
      1. 2.2.1Choisissez un interlignage correspondant à la police, au texte et à la mesure
      2. 2.2.2Augmentez ou diminuez les transitions verticales avec une valeur constante
    3. 2.3Blocs & paragraphes
      1. 2.3.1Justifiez à gauche le premier mot du premier paragraphe
      2. 2.3.2Dans un texte continu, donnez à tous les paragraphes suivant le premier une indentation d’au moins un en.
      3. 2.3.3Séparez les citations du flot du texte
      4. 2.3.4Entrez l’alinéa ou centrez un bloc de vers
    4. 2.4Césure & pagination
      1. 2.4.1À la fin d’une ligne comportant une césure, laissez au moins deux caractères avant et au moins trois après
      2. 2.4.3Évitez les césures sur trois lignes consécutives
      3. 2.4.5Appliquez les césures en respectant les règles de la langue utilisée
      4. 2.4.6Ecrivez les numéros courts et les expressions mathématiques avec des espaces insécables
      5. 2.4.8Ne commencez jamais une page avec la dernière ligne d’un paragraphe
  2. 3Harmonie & contrepoint
    1. 3.1Dimension
      1. 3.1.1Ne composez pas sans une règle
    2. 3.2Chiffres, capitales & petites capitales
      1. 3.2.1Utilisez des titling figures en capitales, et des text figures en toute autre circonstance