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.