Contactez-nous

1

Travailler le style (CSS) du texte courant

22 juillet 2009
par ARNO*
Si les sites et forums consacrés au HTML et aux feuilles de style CSS regorgent d'excellents trucs et astuces pour fabriquer l'interface graphique d'un site avec force menus, menus déroulants, effets de survol, etc., il est un aspect des sites qui ne bénéficie curieusement pas d'autant d'attention: le texte lui-même. J'ai souvent constaté qu'un concepteur allait passer beaucoup de temps à travailler la typographie des menus de navigation et des titres de page, mais pour la présentation du texte lui-même (pourtant l'élément sur lequel on espère que le visiteur passera le plus de temps...), on se contente de solutions systématiques et très simples: -- paragraphes sans indentation, -- une «ligne blanche» entre chaque paragraphe, -- toutes les lignes identiques. En gros: on choisit la police, la taille, et vogue la galère. Voici donc quelques éléments qui, je l'espère, vous donneront des idées pour faire varier la présentation de votre texte courant. Pour commencer, je vais considérer que le texte courant de mon article est dans une classe texte: [
(#TEXTE|image_reduire{500,0})
]
ce qui produira, en gros, du HTML qui ressemble à cela:

Mon premier paragraphe

Mon deuxième paragraphe

Mon troisième paragraphe

Dans la feuille de style, j'accède donc à mon texte ainsi: .texte { # le style de mon pavé de texte } .texte p { # le style de mes paragraphes } {{{Définitions minimales}}} Afin de me débarrasser de tout élément parasite (taille de texte déjà définie en amont, taille du pavé de texte déjà définie), je vais me contenter de ces styles minimaux: body { font-size: 100%; margin-left: 100px; } .texte { width: 500px; } Je décide, pour cet exemple, que la taille du texte sera calculée à partir de la valeur par défaut du navigateur. J'insère une marge à gauche du document, assez large, pour éviter que mon texte ne se colle au bord de l'écran, et je décide que la largeur de ma colonne de texte sera de 500 pixels. Sans autre intervention de ma part, ça donne ça: Ce que je trouve, personnellement, sobre et élégant... {{{Taille du texte et largeur de la colonne de texte}}} On croit souvent avoir beaucoup de latitude pour choisir la taille d'affichage du texte. En réalité, cette taille est directement liée à la largeur de la colonne de texte, car l'un des principaux éléments de lisibilité du texte, c'est le nombre de caractères par ligne de texte: -- des lignes trop courtes (moins de 40 ou 50 caractères par ligne) forcent à de nombreux retours à la ligne, provoquent des espaces vides trop importants dans les lignes (entre les mots si le texte est justifié, à la fin des lignes si le texte est en drapeau, c'est-à-dire aligné à gauche), l'œil se fatigue et la lecture est pénible, -- des lignes trop longues (plus de 100 caractères) sont particulièrement fatigantes: l'œil ne parvient pas facilement à passer à la ligne suivante, il se «trompe» de ligne, et cela introduit un effort important dans la lecture. Selon la police utilisée, la largeur de la colonne et la taille des caractères, comptez le nombre de caractères d'une ligne, et essayez de trouver le bon réglage pour que ce nombre se situe entre 60 et 80 caractères par ligne. (Ce critère concerne le texte courant, pour les éléments de navigation, évidemment, cela n'a pas de sens.) N'hésitez généralement pas à réduire la largeur de la colonne de texte: c'est presque toujours une bonne idée: plutôt que de coller les différentes blocs composant votre page (menu de navigation, texte, «du même auteur», «dans la même rubrique»...), le fait de réduire la largeur de la colonne de texte vous force, en général, à mettre plus d'espace entre ces blocs, et ainsi à aérer le texte. Il faudra que je fasse un texte sur la notion de «blancs tournants»... En gros, les blancs tournants sont l'espace vide (qu'il soit sur fond blanc ou sur une couleur unie) autour du pavé de texte. C'est un élément fondamental: de grands blancs tournants «aèrent» la page; non seulement on donne une impression d'élégance avec des blancs tournants larges, mais d'une certain façon, on améliore la lisibilité du texte (qui n'est pas perturbé, en périphérie de la lecture, par des éléments parasites). Cela introduit une sensation de dynamisme autour du texte (qui ne «bute» pas contre des «murs»), qui donne envie de poursuivre la lecture. Bref: au lieu d'essayer de coller un maximum d'éléments collés les uns aux autres, et surtout d'avoir une colonne de texte la plus large possible, combinez ces éléments: des lignes de texte pas trop longues (60 à 80 caractères), cela vous obligera à augmenter la taille des caractères et à réduire la largeur de la colonne, et du même coup vous obligera à introduire beaucoup d'espace autour du bloc de texte (blancs tournants) et vous fera gagner en qualité graphique. Notons encore un effet de mode concernant la taille des caractères qui permet de plus facilement obtenir le nombre de caractères par ligne désiré: jusqu'à une époque récente, la mode (et donc ce qu'on considérait comme «élégant» sur le Web) était d'afficher les textes à une taille de rendu proche de 12px, c'est-à-dire plutôt petit; il fallait donc faire des colonnes de texte plutôt étroites (sinon: lignes de texte interminables). Désormais, la mode est aux caractères de bonne taille, aux alentours de 15px; avec une colonne de texte de 500 à 550 pixels, on obtient un nombre de caractères adapté. Il convient donc de procéder par essais: les différentes polices utilisables ont des dessins différents et ne donnent pas le même nombre de caractères par ligne, ni le même effet de densité. Voici quelques exemples: Le Georgia en taille standard (1em dans une page dont on a laissé l'affichage du texte à 100%) donne ceci: .texte { font-size: 1em; font-family: georgia, times, "Times New Roman", serif; } Personnellement, ça me semble assez idéal en terme de lisibilité... Essayons avec le Times: .texte { font-size: 1em; font-family: times, "Times New Roman", serif; } La dessin des lettres du Times étant conçu, d'origine, pour gagner de la place dans un journal quotidien, ça donne un effet beaucoup plus tassé, nettement plus de caractères par lignes, et une lisibilité moins idéale. Modifions très légèrement la taille d'affichage: .texte { font-size: 1.05em; font-family: times, "Times New Roman", serif; } En modifiant de 5% la taille d'affichage du Times, on retrouve un rendu très proche du Georgia. (Si vous ne parvenez pas à faire la différence sur ces copies d'écran entre le Georgia et le dernier exemple de Times, observez la forme du «e»: l'intérieur de la lettre est nettement plus ouvert dans le Georgia.) {{{Hauteur des lignes}}} Un code CSS permet de très facilement définir la hauteur qui sépare deux lignes de texte. Cet espace ne sépare pas les caractères verticalement, mais la ligne de base sur laquelle sont posés les caractères. On peut évidemment définir cette taille en pixels (par exemple: séparer chaque trait rouge de 20 pixels), mais puisqu'on travaille ici avec des tailles de caractères relatives, il est plus efficace et plus simple d'indiquer une hauteur de ligne en pourcentage. Personnellement, j'aime utiliser une hauteur de ligne plutôt important, qui aère bien les lignes. Avec une valeur de 120%, on obtient des lignes très tassées, relativement disgracieuses. Avec une valeur de 130%, on obtient un rendu plutôt «standard», très lisible. Avec une valeur de 160% et plus, on commence à perdre la cohérence (l'aspect groupé) des paragraphes. Ma préférence est de 140%, c'est un peu plus que nécessaire, et ça aère le texte sans casser la cohérence des paragraphes. .texte { font-size: 1em; font-family: Georgia, Times, "Times New Roman", serif; line-height: 140%; } Le pourcentage est calculé à partir de la taille des caractères: si quelque part j'affiche du texte en 10 pixels, je sais que 140% donnera une hauteur de ligne de 14 pixels, plutôt «aérée»; si je change cette taille à 14 pixels, les 140% donneront une hauteur de ligne d'environ 20 pixels, «aérée» dans des proportions identiques. Donner la hauteur de ligne en pourcentage permet donc de ne pas faire de calculs pour chaque taille de caractères: je sais que 120% va toujours me donner des lignes très tassées, et que 140% me donnera toujours des lignes «aérées». Noter que, là encore, cela concerne le texte courant. Pour les intertitres, éléments descriptifs, etc., on peut légitimement chercher à condenser l'affichage, et dans ce cas une hauteur de ligne de 120% ou 125% pourra être ponctuellement adaptée. {{{L'espace vertical et l'indentation}}} L'affichage par défaut (rarement modifié) des paragraphes est le suivant: -- les paragraphes sont séparés par un espace vertical de 1em; -- la première ligne des paragraphes n'est pas indentée. Pourtant, si vous lisez un long texte imprimé (un livre notamment, certaines revues), vous constaterez qu'on peut parfaitement procéder autrement: -- les paragraphes ne sont pas séparés verticalement; -- la première ligne de chaque paragraphe est identée, c'est-à-dire décalée légèrement, pour marquer visuellement le changement de paragraphe). Commençons par supprimer l'espacement entre les paragraphes: .texte p { margin: 0; } L'inconvénient est que, désormais, il n'y a plus de repère visuel en début de ligne pour faire comprendre que l'on change de paragraphe. On va donc introduire un décalage dans la première ligne, pour indiquer le début du paragraphe: .texte p { margin: 0; text-indent: 2em; } On retrouve ainsi un repère visuel marquant le début du paragraphe. En typographie classique, on se contente généralement d'une identation d'1em. Mais j'ai ici envie de bien marquer l'effet, je double donc cette valeur. Il y a cependant ici une petite inélégance: il n'est pas nécessaire d'indenter le premier paragraphe du texte, ni le premier paragraphe qui suit un intertitre. Puisque, ces paragraphes ne suivant pas un autre paragraphe, on n'a pas besoin d'introduire d'indentation pour rétablir la séparation entre les deux. C'est d'ailleurs une règle de typographique classique. On ne va donc pas appliquer l'indentation à tous les paragraphes, mais uniquement aux paragraphes qui suivent un autre paragraphe. Il y a un sélecteur CSS2 qui le permet: .texte p { margin: 0; } .texte p+p { text-indent: 2em; } En même temps, rien n'interdit de s'offrir le meilleur des deux solutions: on indente la première ligne de texte des paragraphes, et on conserve un espacement vertical entre les paragraphes. Je réduis cependant cet espacement vertical de moitié: .texte p { margin-top: 0.5em; margin-bottom: 0.5em; } .texte p+p { text-indent: 2em; } L'indentation introduit un bug d'affichage des images propre à SPIP: SPIP insère les images à l'intérieur d'un paragraphe. Ce qui fait que ces images apparaissent décalées vers la droite à cause de l'indentation. Il faut donc contrecarrer cet effet: .texte .spip_documents_center, .texte .spip_documents_left { margin-left: -2em; } Le paragraphe qui contient les images n'étant pas défini par une classe spécifique, c'est donc directement le span qui contient le document que l'on décale vers la gauche. {{{Faire ressortir la première ligne de texte}}} Un élément classique consiste à mettre la première ligne de texte du document en petite capitales. On peut réaliser cela très simplement ainsi: .texte>p:first-child:first-line { font-variant: small-caps; } En clair: le première ligne du premier paragraphe du pavé de texte est passé en petites capitales. Je vais encore ajouter un effet: je veux également que la première ligne du premier paragraphe qui suit un intertitre soit en petites capitales. J'ajoute ceci: .texte>p:first-child:first-line, .texte h3+p:first-line { font-variant: small-caps; } Avec ça, effet «old school» garanti. Voici l'aspect de notre pavé de texte: Et voici l'ensemble des CSS: body { font-size: 100%; margin-left: 100px; } .texte { width: 500px; } .texte { font-size: 1em; font-family: Georgia, Times, "Times New Roman", serif; line-height: 140%; } .texte p { margin-top: 0.5em; margin-bottom: 0.5em; } .texte p+p { text-indent: 2em; } .texte .spip_documents_center, .texte .spip_documents_left { margin-left: -2em; } .texte>p:first-child:first-line, .texte h3+p:first-line { font-variant:small-caps; } {{{Une lettrine}}} En revanche, il n'est pas possible de réaliser une belle lettrine directement via les styles CSS: on peut sélectionner la première lettre du premier paragraphe, mais une lettrine n'est pas forcément la première lettre: si le texte commence par un guillemet ouvrant, ou si le deuxième caractère est une apostrophe, il faudrait placer plusieurs caractères de suite dans la lettrine (par exemple: «guillemet L apostrophe»). De plus, les rendus ne cassent pas de briques et varient assez sévèrement d'un navigateur à l'autre. Mais si l'aventure vous tente et que vous maîtrisez forcément le texte (vous savez que jamais un de vos textes ne commencera par un guillemet ou un L apostrophe), voici une CSS de lettrine: .texte>p:first-child:first-letter { float: left; font-size: 3.4em; background-color: black; color: white; padding: 0.2em; margin-right: 0.1em; margin-top: 0.15em; line-height: 0.7em; } Bof bof bof. Essayons avec un peu de couleur: .texte>p:first-child:first-letter { float: left; font-size: 3.4em; background-color: #ab862c; color: white; padding: 0.2em; margin-right: 0.1em; margin-top: 0.15em; line-height: 0.7em; } .texte>p:first-child:first-line { color: #815e0a; } Personnellement, je ne suis pas convaincu. Et puisque de toute façon je ne peux pas garantir que le premier caractère du premier paragraphe ne sera jamais un guillemet ou un «L apostrophe», je ne mets jamais de lettrine. Hop, poubelle. {{{Pousser le bouchon}}} Sans rien changer à notre code source (c'est toujours le même article avec les codes générés «normalement» par SPIP), on peut pousser le bouchon un peu plus loin. Par exemple: body { font-size: 100%; margin-left: 100px; } .texte { width: 500px; } .texte { font-size: 0.9em; font-family: verdana, helvetica, arial, sans; line-height: 145%; color: #333; } .texte p { text-align: justify; margin: 0; } .texte>p:first-child:first-line, .texte h3+p:first-line, .texte p+p:first-letter { font-weight: bold; } .texte p+p { text-indent: 50%; } .texte .spip_documents_center, .texte .spip_documents_left { margin-left: -50%; } ou: .texte { font-size: 1em; font-family: georgia, times, "Times New Roman", serif; line-height: 145%; color: #333; } .texte h3 { font-family: georgia, times, "Times New Roman", serif; text-align: center; text-transform: uppercase; font-size: 90%; letter-spacing: 0.1em; margin-top: 3em; margin-bottom: 2em; } .texte p { text-align: justify; } .texte>p:first-child { text-align: center; margin-left: 10%; margin-right: 10%; text-transform: uppercase; letter-spacing: 0.1em; font-size: 90%; } .texte>p:first-child:first-line { font-weight: bold; } .texte p+p+p { text-indent: 3em; } .texte p+p+p .spip_documents_center, .texte p+p+p .spip_documents_left { margin-left: -3em; } ou encore: body { font-size: 100%; margin-left: 100px; } .texte { width: 600px; } .texte { font-size: 0.95em; font-family: helvetica, arial, sans; line-height: 135%; color: #444444; } .texte h3 { text-align: right; margin-top: 3em; margin-bottom: 2em; text-transform: uppercase; font-weight: bold; font-size: 1em; letter-spacing: 0.15em; border-bottom: 1px dotted #ccc; } .texte p { margin-bottom: 0em; text-align: justify; } .texte>p:first-child, .texte h3+p { width: 60%; float: left; margin-right: 7%; margin-bottom: 1em; color: #644e11; } .texte>p:first-child:first-line, .texte h3+p:first-line { font-weight: bold; } .texte p+p { width: 70%; margin-top: 5.8em; margin-left: 30%; } .texte p+p+p { margin-top: 0em; text-indent: -30%; } Sur les deux derniers exemples, on aura sans doute intérêt à jouer avec le chapeau de l'article pour que l'effet graphique correspondante plus à la logique du document. Mais bon, c'est histoire de se faire plaisir... {{{Faire fonctionner le biniou avec Internet Explorer}}} Plusieurs des sélecteurs utilisés dans ces styles relèvent des CSS2 (peut-être des CSS3): ils ne fonctionneront pas directement dans Internet Explorer 6, et peut-être de manière complète dans Internet Explorer 7. Face à cela, vous avez deux possibilités: - considérer que ces styles ne sont pas indispensables, et que la perte de certains typages graphiques ne modifie pas du tout l'accès à l'information: le texte est bien là, et la maquette générale des paragraphes est parfaitement satisfaisante, même si on ne bénéficie pas avec des brouteurs du rendu exact; donc laisser comme ça; - faire appel au code Javascript ie7.js (ou ie8.js) qui permet à ces navigateurs de tout de même interpréter ces sélecteurs, avec un petit délai d'affichage (une fois que les CSS sont chargée, la page s'affiche avec un typage incomplet, puis le javascript se lance et corrige le rendu; on a donc une petite saute d'affiche pendant un poil de seconde). Ces codes sont disponibles sur [Google Code->http://code.google.com/p/ie7-js/]. Quand j'utilise ces fichiers Javascript, je préfère les télécharger dans mon propre dossier de squelettes, et ainsi faire un appel local: sinon, à chaque visite sur votre site, les infos de vos visiteurs sont envoyées à Google.
  • Jean-Marc Bonnard
    Juillet 2009

    Bonjour

    Où avez-vous vu que « il n’est pas nécessaire d’indenter le premier paragraphe du texte, ni le premier paragraphe qui suit un intertitre. Puisque, ces paragraphes ne suivant pas un autre paragraphe, on n’a pas besoin d’introduire d’indentation pour rétablir la séparation entre les deux. C’est d’ailleurs une règle de typographique classique » ?

    Juste pour connaître vos sources ;-)

  • ARNO*
    Juillet 2009

    « Quelles sources ? » Je n’édicte pas une règle, je fais remarquer qu’« il n’est pas nécessaire » et qu’« on n’a pas besoin de... ». Si vous voulez les mettre, vous les mettez, si vous ne voulez pas les mettre vous ne les mettez pas. Un peu de variété ne nuit pas, c’est le but de cet article d’exposer des techniques de CSS qui permettent de le faire.

    J’ai sous le nez un recueil de travaux de Neville Brody, il se trouve que dans ses maquettes de magazine, il choisit l’option d’intenter les paragraphes sauf le premier et ceux qui suivent un espacement vertical marqué. Donc, oui, ça se fait et c’est parfaitement logique.

  • ObjectifMars
    Juillet 2009

    Une petite remarque, SPIP ayant déjà JQuery par défaut autant ne pas se priver et l’utiliser car il interprète quasiment tous les sélecteurs CSS3 (sauf certains vraiment peut utiles) et ce pour tous les navigateurs et bien des versions. Donc pas la peine d’utiliser un autre script javascript. Bien sûr pour d’autre projet n’utilisant pas SPIP et/ou JQuery mon argument n’est pas forcément valide.

    Par ailleurs, merci pour cet article, il me permet d’ouvrir mes horizons sur le rendu du texte et de chercher à être un peu original.

  • Valéry
    Août 2009

    "autant ne pas se priver et l’utiliser "

    Quelles seraient les manipulations à réaliser pour un tel usage ?

  • Jean-Christophe Villeneuve
    Octobre 2009

    Article très intéressant, vraiment.

    Un petit souci néanmoins avec le premier paragraphe quand on utilise le plugin "Crayons".

    En effet dans ce cas, la propriété first-child n’est pas prise en compte.

    Mais bon, dès qu’on est déconnecté, tout rentre dans l’ordre.

    C’était juste une remarque pour les admins de site ...

  • John
    Novembre 2012

    « En même temps, rien n’interdit de s’offrir le meilleur des deux solutions : on indente la première ligne de texte des paragraphes, et on conserve un espacement vertical entre les paragraphes. »

    Et bien si, c’est interdit car gravement fautif en bonne typographie française, la notion-même de paragraphe étant mal-comprise… Ce n’est aucunement une critique portée à l’auteur de l’article, c’est plutôt une constatation puisque la plupart des gens, pros ou pas, ne savent pas aujourd’hui ce qu’est réellement un paragraphe.

    En effet, ce qu’on appelle « indentation » est en fait un alinéa. Un alinéa ne marque pas le début d’un paragraphe, c’est un signe de ponctuation. Autrement dit, un paragraphe est un groupe de « p(aragraphes) HTML » qui portent une même idée, font découler une logique, etc. Un nouveau paragraphe commence donc avec une marge supérieure/après un saut de ligne (et peu pourtant s’accompagner d’un alinéa).

    Il n’est donc pas possible d’utiliser cette solution, qui est plus que largement fautive, sauf cas vraiment exceptionnel. Par exemple, si le texte est tellement compliqué à comprendre que l’on doit rendre la lecture moins fluide et que nous constatons que l’utilisation d’une police de caractères pour le faire ne suffit pas, et qu’il est nécessaire de couper le flux de la lecture par des micro-pauses. Bref, on en arrive au point où le typographe se permet avec sûreté mais regret.

    Source : tous les bouquins (corrects) de typographie et d’orthotypographie.

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.