2.3.2Dans un texte continu, donnez à tous les paragraphes suivant le premier une indentation d’au moins un demi-cadratin.

Les ornementations, les sauts de ligne, les sorties d’alinéa et autres ont leur utilité, mais la façon la moins obstruante et la plus efficace de signaler un paragraphe reste l’indentation simple.”

Appliquer une entrée d’alinéa à la première ligne d’un paragraphe, ou tout autre bloc élément se fait en utilisant la propriété text-indent :

p {
  text-indent: 1em;
}

La règle ci-dessus va appliquer un alinéa à tous les paragraphes, mais notre souhait est de ne l’appliquer qu’aux paragraphes qui en suivent un autre. Pour y arriver, il faut utiliser un sélecteur adjacent comme ceci :

p + p {
  text-indent: 1em;
}

De plus, l’espacement d’une ligne que la plupart des navigateurs insèrent par défaut entre les paragraphes doit être annulé. Les navigateurs créent cet espacement en ajoutant un top et un bottom margin aux paragraphes : le bottom-margin doit être enlevé à tous les paragraphes, et le top-margin doit être enlevé à ceux qui en suivent un autre :

p {
  margin-bottom: 0em;
}
p + p {
  text-indent: 1em;
  margin-top: 0em;
}
}

Il n’y a pas de limite à la longueur de l’alinéa, mais il est conseillé de commencer en décrivant un carré. Ce résultat peut s’obtenir en appliquant au text-indent la même valeur que le line-height. Il doit être mentionné ici qu’Internet Explorer 6 ne comprend pas les sélecteurs adjacents. Dans les exemples ci-dessus, ie6 n’appliquera pas d’alinéa aux paragraphes, mais ils seront espacés d’une ligne à la place.

L’indentation n’est pas la seule façon d’indiquer un paragraphe. Les autres solutions comprennent : un retour à la ligne, une sortie d’alinéa, une entrée d’alinéa avec ornement, un ornement dans la continuité du texte, ou encore des sauts de ligne.

Retour à la ligne et saut d’une ligne

Comme il a été mentionné plus haut, les paragraphes séparés par un retour à la ligne et un saut d’une ligne sont générés par défaut par les navigateurs. La section 2.2.2 explique que les margins séparant les paragraphes doivent être égales à la line-height pour que le rythme vertical du texte soit maintenu.

Sortie d’alinéa

Signaler un paragraphe avec une sortie d’alinéa dans la marge est possible de la même façon que l’on applique une entrée d’alinéa : il suffit de choisir une valeur négative :

p {
  margin-bottom: 0em;
}
p + p {
  text-indent: -1.5em;
  margin-top: 0em;
}
}

Ornements

L’entrée d’alinéa accompagnée d’un ornement, au contraire d’une entrée d’alinéa classique, ne nécessite pas l’utilisation du text-indent pour obtenir l’effet désiré. La clef permettant d’arriver au résultat est d’utiliser le pseudo-élément css 2.1 :before. L’exemple suivant permet d’insérer un coeur floral couché au début des paragraphes suivant le premier :

p {
  margin-bottom: 0em;
}
p + p:before {
  content: "\2767";
  padding-right: 0.4em;
  margin-top: 0em;
}
}

Dans l’exemple ci-dessus, appliquer un text-indent au paragraphe aurait pour conséquence de décaler l’ornement avec la première ligne du paragraphe ; pour le séparer du contenu, un padding-right a été appliqué. Une autre utilisation d’un ornement pour marquer le début d’un nouveau paragraphe est d’avoir un flux continu de phrases dans un bloc de texte dont les paragraphes sont marqués par un ornement. Pour obtenir ce résultat, les paragraphes doivent être déclarés comme ayant un display inline (il n’y a alors plus de retour à la ligne), et les ornements comme précédemment (dans cet exemple, un pied de mouche de fantaisie est utilisé à la place du cœur floral couché) :

p {
  display: inline;
}
p + p:before {
  content: "\2767";
  padding-right: 0.1em;
  padding-left: 0.4em;
}
}

Notez bien que les règles précédentes sur les ornements ne seront pas comprises par Internet Explorer (en version 7 au moment de l’écriture) car il ne sait pas interpréter la propriété css utilisée. Aussi, Firefox sur Windows (testé sur xp SP2 au moment de l’écriture) n’affichera ces ornement que s’ils sont contenus dans la fonte utilisée. La technique énoncée ne peut donc pas fonctionner sur les machines Windows pour l’instant. Une alternative serait d’utiliser des images de fond, ou d’inclure une image dans le code qui si elle était dimensionnée en ems pourrait s’adapter à la taille du texte.

Sauts de ligne

Les paragraphes en saut de ligne commencent une ligne plus bas, à l’emplacement horizontal de la fin du paragraphe précédent. Contrairement aux autres styles mentionnés plus haut, il est impossible de réaliser cela en css sans des feuilles de style fastidieuses ou (préférablement), l’aide du JavaScript.

Une technique qui peut être utilisée est proche de celle utilisée pour les paragraphes en flux continu, puisqu’elle utilise aussi display:inline pour obtenir le positionnement horizontal. Un déplacement relatif du bord haut d’une hauteur de ligne appliqué aux paragraphes suivants permet d’obtenir le positionnement vertical désiré (et donc l’effet de saut de ligne recherché).

p {
  display: inline;
  position: relative;
}
p + p { top: 1.428em }
}

Le problème avec cette approche est que le positionnement vertical n’est pas relatif au paragraphe précédent, mais au bloc parent, donc tous les paragraphes après le premier auquel l’effet a été appliqué ont l’air de faire partie d’un flux de texte continu. Pour rectifier le tir, il faut que le positionnement vertical des paragraphes ultérieurs soit un multiple du déplacement du premier paragraphe.

p {
  display: inline;
  position: relative;
}
p + p { top: 1.428em }
p + p + p { top: 2.857em }
p + p + p + p { top: 4.285em }
}

Spécifier des positionnements verticaux de cette façon est évidemment peut praticable, et donc un bon candidat pour une résolution via JavaScript. Cette technique peut cependant s’appliquer à l’affichage d’un texte court.

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