Meilleur espacement des paragraphes

Après avoir appris à styliser les paragraphes pour le web dans l'article précédent, Espacement des paragraphes, ce suivi fournira un peu d'histoire sur les paragraphes, expliquera pourquoi les paragraphes sont importants, montrera comment utiliser HTML et CSS pour les styliser, et proposera d'autres méthodes pour marquer les paragraphes, comme l'utilisation de la flèche (¶).

Alors, qu'est-ce que ce sera ? Des herses, des retraits ou des retours à la ligne ? Vous pouvez prendre une décision esthétique, basée sur l'apparence et la sensation. Ou si le flux de travail est un problème lorsqu'il s'agit de HTML et de CSS, et de gérer les choses sur le long terme, vous pouvez suivre une approche " moins, c'est mieux ". Quelle que soit votre approche, l'espacement des paragraphes ne se résume pas à l'espacement seul.

Origine du paragraphe

Le mot que nous connaissons sous le nom de paragraphe vient du mot français paragraphe, dont les racines remontent au latin médiéval. Et puis il y a le mot grec paragraphos, qui signifie à peu près " à côté de l'écriture". Dans le système d'écriture grecque utilisé jadis, des annotations près d'un corps de texte ou d'un autre signifiaient un changement dans le dialogue. Une marque, une ligne horizontale ou un autre geste graphique permettait de savoir où commençait et où se terminait un passage. Les Grecs utilisaient leurs propres symboles pour indiquer graphiquement ces séparations, et les scribes d'autres pays et d'autres cultures utilisaient également une variété de symboles. Aujourd'hui, nous utilisons la flèche, parfois appelée le P inversé. La flèche est un symbole sous-utilisé pour définir les paragraphes, mais comme les sauts de paragraphe et les retraits, la flèche fait le travail.

---

La herse, dans la police Times New Roman®.

Mais ce P à l'envers n'est pas aussi simple qu'on pourrait le croire. En fait, avant de ressembler à la herse que nous connaissons aujourd'hui, il avait la forme d'un C traversé par une ligne. Au fil du temps, la herse a été de moins en moins utilisée pour indiquer les paragraphes en raison du travail et des ressources nécessaires pour rendre un symbole distinct en plus du texte du paragraphe. Lorsque les molettes étaient supprimées pour gagner du temps ou économiser de l'encre, il restait un espace vide, ce qui donnait les indentations que nous connaissons aujourd'hui.

Aujourd'hui, vous voyez la flèche, aujourd'hui vous ne la voyez pas. Les retraits de paragraphe doivent beaucoup à la herse. La flèche est moins utilisée comme une convention de conception que comme un indice de formatage, en particulier dans les traitements de texte et les logiciels de conception, où elle apparaît comme un élément invisible pour rassurer l'utilisateur sur les points de départ et d'arrivée des paragraphes.

L'importance des paragraphes

Le fait de séparer clairement un paragraphe d'un autre aide les lecteurs à distinguer les idées, une nouvelle idée commençant dans un nouveau paragraphe. Les paragraphes créent également une série de petits morceaux de texte, ce qui est plus attrayant qu'un flux de texte gigantesque et ininterrompu. Voudriez-vous lire le texte dense et serré ci-dessous ?

Ce rectangle massif intimiderait la plupart des lecteurs. Les paragraphes sont indispensables et, quelle que soit la manière dont vous les stylisez, gardez à l'esprit ces principes de base HTML et CSS.

Séparer les paragraphes à l'aide d'une ouverture <p> et la fermeture </p> élément.

<p>First Paragraph</p>
<p>Second Paragraph</p>

Veillez à ajuster l'épaisseur des lignes dans la feuille de style CSS, afin de donner une impression plus ouverte entre les lignes de texte de chaque paragraphe. N'oubliez pas non plus que les hauteur de ligne pour une police de caractères peut ne pas fonctionner de la même manière pour une autre.

Vous pouvez créer des paragraphes en utilisant des pauses, comme indiqué ci-dessus, pour que les blocs de paragraphes offrent une séparation nette et claire. L'exemple ci-dessous permet d'ajuster l'espace entre les paragraphes à l'aide d'un marge spécifiée dans le CSS.

Les retraits, parfois appelés tabulations, sont également utiles pour marquer les paragraphes. Les retraits peuvent être larges ou, dans le cas de retraits extrêmes, extra larges.

Les retraits extrêmes ne sont généralement pas attrayants. Les petits retraits sont plus efficaces. Les petits retraits sont plus attrayants pour le lecteur car ils sont plus silencieux et ils utilisent mieux l'espace de conception.

Créez vos retraits pour qu'ils s'adaptent à toute une gamme d'écrans numériques, depuis les ordinateurs desktop jusqu'aux écrans plus petits des ordinateurs portables, des tablettes et des smartphones. En ce qui concerne l'espacement entre les paragraphes et la mise en retrait, n'oubliez pas que vous n'avez pas besoin des deux, d'autant plus que certains guides de style suggèrent que c'est comme porter une ceinture et des bretelles.

Des indentations plus intelligentes et non plus dures

L'article précédent, Espacement des paragraphes, présentait différentes façons de spécifier les retraits en HTML et en CSS. Dans tous les cas, vous obtiendrez les mêmes résultats lorsque le texte sera affiché dans un navigateur. Mais chaque méthode présente ses avantages et ses inconvénients.

Pour commencer, vous pouvez utiliser une classe, ce qui sera pratique si vous ne voulez que quelques paragraphes, indentés ici et là.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
.indented {
text-indent: 3em;
}

<p>No indent would appear in this one.</p>
<p class="indented">This paragraph would be indented.</p>
<p class="indented">This paragraph would also be indented.</p>

Insérer une classe après l'autre n'est pas la meilleure façon d'utiliser votre temps. Si vous voulez des retraits dans toute votre mise en page, vous devez travailler plus intelligemment, et non plus difficilement. Vous pouvez utiliser la classe :first-child Pseudo-classe CSS pour le premier paragraphe pas ont un retrait, les paragraphes suivants étant indentés.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
text-indent: 3em;
}
p:first-child {
text-indent: 0;
} 

<p>No indent occurs because it is the first-child.</p>
<p>This paragraph would be indented.</p>
<p>This paragraph would be indented.</p>

Les méthodes ci-dessus utilisant des classes ou des :first-child Les deux fonctionnent et donnent les résultats escomptés. Mais en termes d'efficacité et de propreté, elles sont toutes deux maladroites si vous voulez qu'une mise en page entière - ou un site entier - utilise des retraits de paragraphe. Vous ne voulez pas écrire classe après classe dans votre HTML. Et l'ensemble des :first-child peut devenir quelque peu déroutant. Pire encore, les rapports divergent en ce qui concerne la prise en charge : certains suggèrent que Microsoft® Internet Explorer® 7, 8 et 9 reconnaîtront le :first-childmais d'autres rapports suggèrent que seulement Explorer 9 et les versions ultérieures.

Il existe une meilleure solution, plus largement soutenue. Le plus beau ? Elle est ordonnée. Si vous savez que vous voudrez toujours le premier paragraphe pas indenté, mais les paragraphes suivants indentés, utilisez le sélecteur adjacent (+), également connu sous le nom de Suivante-sibling selector ou adjacent sibling selector.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p+p {
text-indent: 3em;
}

Dans le cas du CSS ci-dessus, p+p style chaque paragraphe après le premier avec une indentation. De plus, il utilise 103 caractères en CSS, alors que le format :first-child utilise 128. Dans ce cas, le moins est définitivement le plus, ce qui permet d'obtenir des feuilles de style CSS bien rangées et de se libérer de la confusion liée à l'utilisation de la fonction :first-child.

Prise en charge de l'utilisation du sélecteur adjacent (+) est largement répandu dans les navigateurs web modernes, bien qu'à l'heure où nous écrivons ces lignes, des versions de Microsoft Internet Explorer aient été signalées comme posant des problèmes, en particulier Explorer 6. Internet Explorer 6 est utilisé par moins de 1 % de la population naviguant sur le web, selon un rapport de Microsoft en utilisant les données de 2015 de Net Applications. On peut donc dire que l'utilisation du sélecteur adjacent (p+p) est une valeur sûre. Mais si vous craignez que les visiteurs de votre site n'utilisent un navigateur plus ancien et non pris en charge, formatez les paragraphes en blocs simples en utilisant des sauts de ligne et uniquement des sauts de ligne.

Les paragraphes en bloc font le travail, sans qu'il soit nécessaire d'ajouter des feuilles de style CSS pour styliser les retraits. En n'utilisant ni le sélecteur adjacent (p+p) ni :first-child ni Indentation du texte dans votre CSS utilise encore moins de caractères. Avec 89 caractères pour définir les paragraphes en tant que blocs, contre 128 et 103 pour les retraits, les paragraphes en blocs sont des feuilles de style CSS bien rangées - si vous êtes du genre à vouloir en faire le moins possible.

Le Pilcrow pour les paragraphes

Si vous souhaitez donner à votre site web un aspect ancien, vous pouvez utiliser la flèche pour séparer un paragraphe d'un autre. Pour ce faire, vous devez l'afficher sous la forme d'une icône ¶ en HTML. Mais pas si vite. Avant d'entrer une molette comme ¶ dans chacun des paragraphes de votre site web, gardez ceci à l'esprit : cette opération est fastidieuse et prend du temps. Si vous souhaitez automatiser le processus, utilisez ::avant en CSS pour insérer une flèche au début de chaque paragraphe.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p::before {
content: "B6";
margin-right: 0.5em;
color: gray;
} 

Dans le CSS ci-dessus, "B6" est l'Unicode de la molette. Vous pouvez également utiliser le sélecteur adjacent lors du rendu des molettes si vous souhaitez que le premier paragraphe soit pas ont un pilcrow, mais les suivants utilisent le pilcrow.

p {
font-family: Georgia, Times, serif;
font-size: 1.5em;
line-height: 2;
margin: 0;
}
p+p::before {
content: "B6";
margin-right: 0.5em;
color: gray;
} 

Puisque vous ajoutez un élément de design pour mélanger les choses, pourquoi ne pas mélanger les polices de caractères. Vous pouvez placer le paragraphe dans une police de caractères et la molette dans une autre. Dans l'exemple ci-dessous, la police Helvetica® est utilisée pour le texte courant et la police Times® pour la flèche.

Il existe un grand nombre de sites web polices parmi lesquels vous pouvez choisir pour votre houppier. Chaque police de caractères en aura une différente, allant du gras au fin, du rond au bloc, du court au haut, ou du calligraphique au mécanique, et bien d'autres choses encore.

De gauche à droite, des moineaux sertis dans les caractères Adobe Garamond™, Aachen™, ITC Souvenir®, Kairos® et Posterama™ 1901.

Espacés

Les conventions en matière de design vont et viennent. Les styles évoluent. La pratique de la conception de paragraphes a évolué au fil des siècles et certaines des méthodes utilisées il y a longtemps sont encore en usage. D'autres sont considérées comme dépassées. Alors, comment décider ce qui fonctionne le mieux ? Testez différents styles de paragraphes avec des utilisateurs, pour voir ce qu'ils préfèrent et comment ils interagissent avec la typographie. Lorsque vous essayez différentes polices de caractères et envisagez diverses possibilités de conception, testez également l'espacement des paragraphes, idéalement en effectuant des tests auprès des utilisateurs sur différentes tailles d'écran. Testez également la herse, car, qui sait, elle pourrait bien convenir au lecteur. Il est important de savoir comment le lecteur interagit avec la conception, qu'il s'agisse d'une molette ou non, et les tests vous mettent en contact avec la facilité d'utilisation et la fonctionnalité. Ce contact est important, car vous ne voulez pas être un concepteur de cadets de l'espace, ne prêtant aucune attention à l'expérience de l'utilisateur.