Les césures automatiques

Une césure est une coupure de mot en fin de ligne par l'ajout d'un trait d'union pour que le texte soit aligné (ou justifié lorsqu'il est aligné à la fois à droite et à gauche) dans l'espace qui lui est alloué.
Jusqu'à présent, on pouvait les obtenir de deux façons : soit en plaçant un trait d'union conditionnel (qui dit au navigateur où il peut couper les mots en insérant le caractère spécial ­, pour soft hyphen), soit en utilisant un script javascript pour positionner les césures côté client. Une troisième voie est dorénavant possible : la feuille de style en CSS3.

Les césures automatiques en CSS3

En ajoutant ces trois lignes dans votre feuille de style, vous allez aider votre texte justifié à être joliment affiché sans ces espaces vides disgracieux en milieu de ligne.

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Les trois valeurs possibles sont : none, manual et auto.

Vous allez aussi devoir dire au navigateur la langue que vous utilisez si vous voulez qu'il applique les bonnes règles de césure. Par exemple, l'allemand, l'anglais et le français n'utilisent pas les mêmes règles. Pour ce faire, vous devez utiliser l'attribut HTML lang ou l'attribut XML xml:lang.

Firefox supporte actuellement les langues suivantes (selon sa version) : afrikaans (af), allemand (orthographe traditionnelle, de-1901 et orthographe réformée, de-1996), anglais (américain, en-US), bulgare (bg), catalan (ca), danois (da), espagnol (es), estonien (et), finnois (fi), français (fr), galicien (gl), gallois (cy), haut-sorabe (hsb), hongrois (hu), islandais (is), italien (it), kurmandji (kmr), latin (la), lituanien (lt), mongol (mn), néerlandais (nl), norvégien Bokmål (nb), norvégien Nynorsk (nn), portugais (pt), russe (ru), serbo-croate (sh), slovène (sl), suédois (sv), suisse allemand (orthographe traditionnelle, de-CH), turc (tr) et ukrainien (uk).

Deux langues artificielles sont aussi supportées : l'esperanto (eo) et l'interlingua (ia).

Peut-être verrons-nous bientôt le sindarin (sjn), le quenya (qya) ou même le klingon (tlh) être supportés (Quelqu'un a-t-il déjà établi les règles de césure du klingon ?).

Internet Explorer 10 supporte les langues suivantes : anglais (en, en-US), catalan (ca), danois (da), espagnol (es), français (fr), italien (it), néerlandais (nl), norvégien bokmål (nb), norvégien nynorsk (nn), polonais, portugais (pt), portugais du Brésil, russe (ru), suédois (sv), tchèque (cs) et turc (tr).

Les césures en javascript

Hyphenator est une librairie javascript qui travaille côté client. Son utilisation basique est aussi simple que faire un lien vers le script, donner des valeurs à ses paramètres et l'appeler avec le texte à traiter. Voici un exemple avec quelques paramètres, dont useCSS3hyphenation qui donne la main à la césure en CSS3 lorsqu'elle est supportée, safecopy qui permet le copier-coller du texte traité sans les traits d'union conditionnels, et hyphenchar qui vous permet de choisir le caractère de séparation (trait d'union conditionnel encodé en HTML par défaut).

Hyphenator.config({
    minwordlength:2,
    remoteloading: false,
    useCSS3hyphenation: true,
    safecopy:true
});
Hyphenator.hyphenate("S'il vous plaît, appliquez-moi une césure automatique (même anticonstitutionnellement) !", 'fr');

Il y a d'autres façons d'utiliser Hyphenator, comme bookmarklet (ou marque-page scripté), ou pour appliquer une césure automatique à différentes langues sur la même page.

À l'heure où j'écris ces lignes, la version 4.0.0 de cette librairie supporte déjà les langues suivantes : allemand, anglais (US et GB), arménien, biélorusse, bengali, catalan, danois, espagnol, finnois, français, grec (monoton, polyton et ancien), gujarati, hindi, hongrois, italien, kannada, latin, letton, lituanien, malayalam, néerlandais, norvégien, oriya, polonais, portugais, punjabi, russe, slovaque, slovène, suédois, tamil, tchèque, telugu, turc et ukrainien.

Les césures automatiques côté serveur

Les mêmes algorithmes de césure automatique peuvent s'appliquer côté serveur pour mettre autant de traits d'union conditionnels en HTML que possible dans les mots. Cependant, comme l'affichage se passe du côté du navigateur, autant le laisser s'occuper de cette tâche (en plus, on peut ainsi éviter l'effet de bord du copier-coller où tous les traits d'union conditionnels sont récupérés dans le texte copié).

Conclusion

Avec ces trois différentes façons de gérer la césure automatique, vous n'avez plus d'excuse pour des textes qui ne se comporteraient pas d'une manière typographiquement appropriée, même dans un espace réduit. La méthode que je préfère est sans conteste celle de la librairie javascript Hyphenator, puisqu'elle suit le principe de dégradation progressive en utilisant le CSS3 lorsque possible.

Hyphenation on the web (en anglais)
Los guiones de corte automático (en espagnol)
A hifenização automática (en portugais)