Phollow.me

Les césures dans le web

En typographie, la césure est l'art de couper un mot de telle manière à ce qu'il entre dans la justification. Cette pratique est utilisée dans les livres et depuis peu de temps possible aussi sur le web.

On a inventé ce système pour pouvoir mettre plus de mots sur une page donc économiser du papier à l'imprimerie et améliorer la justification. Même si on n'utilise pas de papier sur le web, on peut toujours gagner de la place et améliorer l'aspect général de la typographie.

Parfois les textes justifiés sont vraiment horribles sur les pages web, avec des rivières monstrueuses. Les césures améliorent nettement ça, donc passons maintenant au code.

Nouvelle méthode CSS3


p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

À l'heure où j'écris ces lignes, les navigateurs supportant ces propriétés sont Firefox 6+ et Safari 5.1+. Pour les désactiver il suffit de passer auto en manual. En mode manuel, les ­ sont néanmoins toujours respectés.

Les césures ont des règles strictes d'utilisation, règles changeant suivant la langue. Le navigateur doit savoir dans quelle langue vous écrivez, donc vous devez la renseigner. Un lang="fr" dans la balise <html> suffit par exemple.

Hyphenator

Cette bibliothèque javascript permet d'activer les césures sur tous les navigateurs supportant le « trait d'union conditionnel ». Ce caractère &shy; est invisible quand on le place mais il sert à déterminer l'endroit où une césure peut avoir lieu.

L'avantage de ce script est qu'il privilégie l'utilisation de la méthode CSS3 sur les navigateurs la supportant.

http://code.google.com/p/hyphenator/

Examples

Les paragraphes de mon blog devraient maintenant tous fonctionner avec ce système de césures — depuis la mise à jour du thème en fait — et donc vous devriez les voir sur cet article (et les autres) — à condition d'avoir un navigateur assez récent, mais je ne me fais pas de soucis pour vous.