Au début était HTML

Contrairement à une idée reçue, la césure est un mécanisme relativement ancien sur le Web. En effet, des possibilités de césure existaient déjà dans les vieilles versions d’Internet Explorer (avant même sa version 6) et font partie de la norme HTML depuis au moins sa version 3.2.

Historiquement donc, HTML définit deux méthodes permettant de spécifier des opportunités de césure [1] :

• L’entité de caractère ­
  Cette entité HTML représente le caractère « césure douce » [2]. Ce caractère est invisible jusqu’à ce qu’une césure soit réellement pratiquée, auquel cas, il apparaît comme un tiret.
• La balise <wbr>
  Cette balise fait quasiment la même chose que l’entité ­. La seul différence tient au fait que cette balise ne matérialisera pas les césures sous forme d’un tiret. À l’origine c’est une balise non standard largement implémentée dans les navigateurs (à commencer par Internet Explorer) qui, au vu de son large support, a finalement été standardisée dans HTML5.

Un des usages les plus courants de ces deux éléments consiste à définir soi-même les opportunités de césure sur des mots particuliers :

<p>Des opportunités de césures pour le mot « anti&shy;con&shy;sti&shy;tu&shy;tion&shy;nel&shy;lement »</p>

La balise <wbr> est plus appropriée pour les cas où un tiret de césure induirait une ambiguïté comme dans les URL :

<p>http://<wbr>typographisme.net/<wbr>post/<wbr>De-la-cesure-et-du-Web</p>

J’ai réalisé une petite page de test où vous pouvez voir toutes ces techniques en action.

Le principal problème de cette méthode, c’est qu’elle requiert que vous définissiez vous-même, à la main, toute les opportunités de césure. Autant ce peut être acceptable pour un mot de-ci de-là, autant cela relève de l’utopie lorsqu’il s’agit de gérer un texte complet. Ceci dit, rien ne vous empêche de gérer ces opportunités de césure via un script côté serveur, qui fera le travail pour vous.

Du point de vue de l’accessibilité par contre il faut vous méfier, ces deux mécanismes étant gérés de manière assez disparate par les assistances techniques. Selon les outils utilisés le rendu peut alors être assez différent. A titre d’exemple, VoiceOver avec Safari a tendance à vocaliser les mots sous forme de syllabes. Si vous avez des retours d’expérience concret sur ce point, les commentaires vous tendent les bras.

Puis vint JavaScript

Pour automatiser tout ça, une autre option consiste à utiliser JavaScript. Pour cela, il existe plusieurs solutions, de la plus frustre (à base d’expressions régulières) à la plus élégante (via hyphenator.js).

À titre d’exemple, l’utilisation du script hyphenator (qui, soulignons-le, fait les choses dans les règles de l’art) est redoutablement simple :

<p class="hyphenate">D'abord un gardien de Camargue...</p>

<script src="Hyphenator/Hyphenator.js"></script>

<script>
Hyphenator.run();
</script>

Toujours sur la page de test, vous pouvez voir ce script en action.

Au-delà de cette simplicité de façade, ce script offre de nombreuses possibilités de personnalisation que je ne vous détaillerai pas ici mais qui vous permettront de raffiner vos césures en fonction de vos besoins.

Ceci dit, l’utilisation de ce genre de script peut avoir un coût particulièrement significatif pour les performances de votre site. En effet, au-delà des calculs que doit faire le navigateur pour positionner les entités ­ là où il le faut, une bonne gestion des césures nécessite ce que l’on appelle un « dictionnaire de césure ». En effet, une césure, ça ne se place pas n’importe où et chaque langue a ses propres règles en la matière. Ainsi, pour éviter les césures disgracieuses, il faut définir toutes les règles d’application.

Ces règles peuvent, selon les langues, être assez volumineuses et alourdir considérablement le poids de votre page. À titre d’exemple, le dictionnaire de césure d’hyphenator pour le hongrois fait 455Ko (!), pour l’allemand 79Ko et pour l’anglais britannique encore 45ko… mais pour le français, seulement 8ko et moins de 2ko pour l’italien. Soyez donc prudent si vous utilisez cette solution, en particulier dans un environnement à faible bande passante comme les réseaux mobiles.

Enfin apparut CSS

Ainsi, jusqu’à présent, les solutions dont nous disposions n’étaient pas forcément très aisées à mettre en oeuvre pour gérer les césures. Néanmoins, les choses changent. Ainsi le module CSS3 Text définit une nouvelle propriété nommée hyphens. Elle va nous permettre de gérer la césure automatique des mots à l’aide d’une simple déclaration CSS : bonheur et simplicité.

<style>
.hyphenate {
    hyphens: auto;
}
</style>

<p class="hyphenate">D'abord un gardien de Camargue...</p>

Cette propriété étant encore jeune, elle n’est pas encore bien répandue. Cependant, au moment où j’écris ces lignes, elle commence à être disponible en version préfixée :

• Firefox (avec le préfixe -moz-) a été le premier à la mettre en œuvre pour une trentaine de langues environ à l’heure actuelle, 
• Chrome et Safari (avec le préfixe -webkit-) sont également dans la course, mais les langues supportées en dehors de l’anglais ne sont pas connues.
• Enfin, Internet Explorer 10 (avec le préfixe -ms-) va s’y mettre à son tour avec une vingtaine de langues à son actif.

Là aussi, la page de test vous permet de voir le résultat de cette propriété CSS.

Le principal intérêt de cette méthode est que les dictionnaires de césure dont nous parlions précédemment sont directement embarqués au sein du navigateur et n’alourdissent donc pas votre page. Ceci dit, comme nous l’avons vu, ces dictionnaires peuvent être volumineux et certains éditeurs de navigateur font le choix de ne pas les fournir sur les versions mobile de leur navigateur, afin que celles-ci restent le plus compactes possible sur des plateformes à faibles capacités. Il n’y a donc pas de garantie de fonctionnement systématique de cette solution qui, rappelons-le, reste expérimentale.

Le mot de la fin

Avec ce tour d’horizon, vous n’avez désormais plus d’excuse, vous pouvez utiliser les césures sur le Web. En fonction de vos prérequis, vous êtes libre de choisir la technique qui vous convient le mieux : toutes ont leurs avantages et leurs inconvénients. À vous de peser le pour et le contre mais maintenant, vous le savez, c’est possible.

Ceci étant dit, ce n’est pas parce que c’est possible qu’il faut le faire. À titre très personnel, je fais partie de ces gens qui ont toujours trouvé que les césures sont horriblement disgracieuses. En ces temps modernes de l’informatique, il existe d’autres solutions plus élégantes pour répartir les blancs au sein des lignes sans avoir à couper les mots. Les utilisateurs de technologies comme LaTex le savent bien, il existe des algorithmes mathématiques capables de créer des textes justifiés sans césure ni rivière de blanc en son sein. Peut-être un jour verrons-nous cela dans nos navigateurs mais, pour des raisons extrêmement techniques, ce n’est malheureusement pas pour tout de suite. En attendant, et bien… s’il le faut vraiment, coupez les mots.

1. Une opportunité de césure, c’est un endroit où le navigateur aura le droit de réaliser une césure. Par contre, le fait qu’il y ait ou non une césure à cet endroit spécifique dépend de ses propre règles internes. [retour]
2. « Soft hyphen » dans la langue de Shakespeare, nom de code U+00AD en Unicode [retour]