La gestion de la césure en CSS

Openweb.eu.org > Articles  > La gestion de la césure en CSS

Abstract

Une fois n’est pas coutume, Nicolas Hoffmann se penche pour nous sur un sujet typographique : la césure en CSS.

Passé, présent et futur de la gestion de la césure s’entrecoupent avec une touche historique… et d’accessibilité, vous n’alliez pas y couper, c’est sûr !

Article

Introduction historique

À l’origine, le mot « césure » désigne en bon français une coupure rythmique au sein d’un vers ou d’une phrase (éventuellement musicale).

Par abus de langage ou simple ignorance, bon nombre de personnes désignent ainsi ce que les typographes et les grammairiens ont toujours appelé « la division » ou « la coupure de mots en fin de ligne ».

Nous reprendrons à notre compte cette légère digression et utiliserons le mot « césure » !

Aparté sur l’accessibilité

Qu’on se le dise, la césure va souvent de pair avec du texte justifié (mais pas uniquement). Et texte justifié va de pair avec… des problèmes d’accessibilité.

Même si l’on pourrait croire que la césure pratiquée seule puisse être systématiquement un problème mineur d’accessibilité, ce n’est pas toujours le cas. Par exemple, un morceau de mot n’a aucun sens pour une personne dyslexique : elle doit donc d’abord trouver le début de la ligne suivante, lire l’autre morceau et reconstituer le mot. Selon la complexité du texte et d’autres facteurs comme sa lisibilité, le problème peut vite prendre de l’importance.

Que cela soit clair, il n’est pas question ici d’interdire l’utilisation de la césure. Il faut trouver un bon équilibre, ces problèmes peuvent être grandement atténués en soignant les points suivants :

  • un contraste de texte suffisant ;
  • une longueur de ligne adaptée, comme nous l’a rappelé Nicolas Torres dans Définir ses points de rupture ;
  • une mise en page structurée et aérée (titres et sous-titres, interligne, longueur et séparation des paragraphes, densité de la police choisie) ;
  • et bien sûr l’absence de pollution du champ visuel (qui oserait ne serait-ce qu’y penser ?).

Bref, avant d’étudier cette science, une petite citation Rabelaisienne pour résumer cette mise en garde : science sans conscience n’est que ruine de l’âme.

La césure par le passé

Il existe l’entité HTML ­, appelé « césure douce ». Ce caractère n’apparaît pas sauf si une césure est pratiquée, dans ce cas, elle sera très logiquement matérialisée par un tiret. En quelque sorte, ce caractère indique là où il est possible et souhaitable d’effectuer une césure.

La balise wbr (pour Word Break Opportunity) quand à elle permet de suggérer l’endroit où le navigateur peut effectuer une césure, mais elle ne sera matérialisée par aucun caractère. Cette balise était non standard et implémentée depuis Internet Explorer 5.5 : « était » est mis en emphase car cette balise a été intégrée depuis à la spécification HTML5.

En résumé, la gestion de la césure ainsi est manuelle : il est donc aisé d’imaginer pour de longs textes la quantité de travail que cette gestion peut représenter. Autrement dit, la gestion de la césure était plutôt laborieuse.

Sans passer par un système de gestion côté serveur, il existe bien d’autres solutions comme par exemple en JavaScript avec Hyphenator. Encore une fois, selon la complexité de la gestion de la césure selon les langues, ce type de gestion effectué côté client peut avoir un coût non négligeable sur les performances d’affichage.

La césure au « pré-sent »

Fort heureusement, la gestion de la césure se simplifie grandement. Actuellement, la propriété hyphens permet d’indiquer au navigateur que l’on souhaite effectuer des césures sur le texte. Cette propriété fait partie du module CSS3 Text.

Au moment de l’écriture de cet article, le module est en Last Call Working Draft (« dernier appel sur le brouillon de travail ») depuis le 10 Octobre 2013. Autrement dit, le brouillon s’est quelque peu stabilisé.

Attention : même si cette propriété est utilisable, elle n’est pas en recommandation. Ce qui veut dire que cette propriété est encore expérimentale et pas forcément stabilisée, il faudra donc la préfixer comme suivant :

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;

Pour le reste de l´article, nous nous contenterons d’utiliser la propriété non préfixée.

hyphens: manual; permettra, comme la valeur l’indique, de gérer la césure manuellement. Autrement dit, cela revient à faire comme dans le paragraphe précédent : il faudra utiliser wbr et ­.

hyphens: none; indiquera au navigateur de n’effectuer aucune césure, et ce même si des suggestions de césure ont été faites dans la structure.

hyphens: auto; par contre permettra d’indiquer au navigateur qu’il pourra gérer automatiquement la césure. Ce dernier appliquera la césure uniquement s’il a les règles de référence définies pour la langue du document. Pour ce faire, il faudra bien sûr que la langue du document soit indiquée dans l’attribut lang sur la balise html.

Selon la richesse de ces règles, la césure pourra être effectuée plus ou moins correctement. Analogie : voyez ces règles de césure comme un dictionnaire, plus il sera riche et complet, mieux la césure sera rendue.

Côté support des navigateurs, c’est assez disparate au moment de l’écriture de cet article :

  • Internet Explorer la supporte depuis sa version 9 avec le préfixe -ms et a un certain nombre de dictionnaires de langues à disposition ;
  • Firefox est dans le même cas, avec le préfixe -moz bien sûr ;
  • les navigateurs à base de webkit supportent également la propriété, préfixée par -webkit. Par exemple, Safari la supporte à partir de la version 5.1 dans sa version desktop, et à partir de iOS 4.2 pour sa version mobile.

Aparté : Chrome étant proposé sans aucun dictionnaire de césure, il est donc incapable d’effectuer la césure avec cette propriété. On se tournera donc vers la propriété word-break: break-word; si on souhaite effectuer une césure avec ce navigateur. Attention, break-word est une valeur propriétaire (non standard). Malheureusement, c’est la seule qui semble produire des résultats à peu près corrects pour cette propriété.

Ajout : il existe bien la propriété word-wrap qui permet de casser les mots trop longs (elle fonctionne sur Chrome), néanmoins il n’y a pas de césure (le mot est coupé en deux sans tiret), et elle est effectuée de manière complètement brutale (n’importe où dans le mot), donc c’est à utiliser avec beaucoup de prudence.

En résumé, une solution actuelle passe-partout ressemble à cela :

word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;

En résumé, cette propriété permet de proposer une amélioration progressive : elle ne gênera pas ceux qui ne la supportent pas, et offrira une solution raisonnablement satisfaisante.

Néanmoins, par honnêteté intellectuelle, il faut signaler que cette propriété n’a pas un rendu parfait : comprenez par là qu’un amoureux de la belle typographie pourra voir quelques crimes typographiques. Par exemple : plusieurs lignes qui se suivent ne devraient jamais se terminer par une césure (effet appelé « échelle »), cela rend le texte potentiellement désagréable et difficile à lire.

La raison en est simple : les moteurs de rendu des navigateurs ne sont pour l’instant pas perfectionnés au point de gérer le rendu du texte de manière si « avancée ».

En pratique, une solution peut consister à avoir toujours une classe à disposition qui permet d’annuler la césure si cette dernière a un rendu insatisfaisant ou si le client a un regard un peu trop pointilleux quant au rendu de cette dernière.

.nocut {
 word-break: normal;
 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 -o-hyphens: none;
 hyphens: none;
}

À noter : le rendu de word-break: break-word; est aussi quelque peu hasardeux sur Chrome. Si d’aventure vous n’appréciez pas le résultat, oubliez cette ligne et tant pis pour la césure sur ce navigateur (si c’est possible).

Néanmoins, des choses très intéressantes sont en préparation, petit tour non exhaustif.

La gestion de la césure, à l’avenir

Les futures spécifications sur CSS4 Text sont à l’heure de l’écriture de cet article à l’état de brouillon le plus instable qui soit ! C’est même plus une réflexion sur le sujet qu’un brouillon proprement dit.

hyphenate-limit-lines limite le nombre de lignes consécutives ayant une césure, parfaite pour contrer l’effet d’échelle énoncé plus haut.

hyphenate-limit-chars permet de gérer le nombre de caractères minimum du mot pour effectuer une césure, ainsi que le nombre de caractères minimum avant et après la césure. Par exemple, dans hyphenate-limit-chars: 6 3 2; la première (6) correspond à la limite minimale du nombre de caractères pour que le mot puisse avoir une césure, la seconde est le nombre de caractères minimal avant le tiret (3), et la dernière correspond au nombre de caractères minimum après le tiret (2).

hyphenate-limit-zone permet d’indiquer la zone que chaque mot doit atteindre pour bénéficier d’une césure, et ce afin de diminuer l’effet de drapeau, ou du moins son irrégularité.

hyphenate-limit-last permet de gérer la césure sur la dernière ligne : par exemple hyphenate-limit-last: always; indique de ne pratiquer aucune césure sur la dernière ligne de chaque page, colonne ou paragraphe.

hyphenate-character permet de spécifier le caractère de césure.

Pour plus de détail, vous pouvez aller voir le brouillon de CSS4 Text. Le carré rouge indiquant Not ready for implementation (pas prêt pour l’implémentation) devrait achever de vous convaincre de la haute instabilité dudit module. sourire

Une fois n’est pas coutume, c’est Internet Explorer à partir de la version 10 qui supporte le mieux ces propriétés : les trois premières sont supportées en version préfixée -ms. Safari supporte uniquement hyphenate-limit-lines, en version préfixée bien sûr (-webkit).

D’autres propriétés CSS comme text-justify pourraient influer sur la gestion de la césure, toutefois, pour d’évidentes raisons de longueur, il est impossible de toutes les aborder ici. Si vous êtes curieux, vous pouvez aller jeter un œil au module CSS3 Text.

Conclusion

Comme toujours avec le Web, le sujet est en perpétuelle évolution, et comme nous avons pu le voir, nous allons vers un mieux très agréable.

En l’état actuel, selon le niveau d’exigence du rendu de votre texte, des solutions sont possibles pour gérer la césure, et il serait dommage de s’en passer.

N.B : qu’il me soit permis de remercier ici la grande aide du collectif pour l’affinage de cet article, et notamment Monique Brunel et Gilles Chagnon pour avoir évité à cet article une ruine de l’âme. Comprenne qui pourra. sourire

Références, compléments

À propos de cet article

Vos commentaires

  • QuentinC Le 25 novembre 2013 à 22:24

    Je tiens à signaler que la césure « à l’ancienne » pose des problèmes aux lecteurs d’écran.

    Le caractère trait d’union virtuel, tiret facultatif, soft-hyphean, bref, appelez-le comme vous voulez, est perçu comme un caractère à part entière et n’est jamais ignoré, au moins avec certains lecteurs d’écran. Les mots ainsi coupés (le plus souvent en syllabes) peuvent présenter des anomalies de prononciation qui peuvent parfois aller jusqu’à devenir carrément inintelligibles. Donc, à ne pas utiliser !

    Heureusement, il semblerait que les nouveaux mécanismes prévus par CSS3 ne posent pas de problème.

  • Nicolas Hoffmann Le 15 août 2014 à 10:36

    Merci beaucoup pour ce commentaire, je l’ai ajouté à la version anglaise. sourire

  • Lamecarlate Le 12 novembre 2015 à 12:12

    Je me permets de signaler que -o-hyphens n’a jamais existé, et n’existera probablement pas puisque Opera utilise le moteur Webkit. Ça fait une ligne de moins à mettre sourire

  • Nicolas Hoffmann Le 16 novembre 2015 à 11:05

    @lemacarlate : cet article a été écrit avant qu’Opera ne passe sous Webkit, et donc, afin de ne pas risquer de blâmer le fantastique moteur que Presto était, le préfixe avait bien été mis (plus pour rappeler qu’il existait). J’assume totalement cette imprécision sourire

    (je le mets à jour dès que possible ceci dit clin d'œil

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • 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.

Suivre les commentaires : RSS 2.0 | Atom