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. :)

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. :)

Références, compléments

• Le Module CSS3 Text
• Le Module CSS4 Text
• La propriété hyphens sur le Mozilla Developer Network
• De la césure et du Web, sur Typographisme
• Hyphenator
• La balise wbr sur le Mozilla Developer Network
• Un contrôle plus fin des césures avec CSS4 Text, sur Creativ Juiz
• Gérer le débordement des contenus et la césure CSS
• L’origine du mot « césure », sur OrthoTypographie