La césure typographique en CSS

Typography
Copyright : Ken Zirkel

On y pense rarement, et pourtant, la césure, autrement dit la coupure de mots dans un texte, aussi hyphens en anglais, est un procédé typographique très courant. Dans le monde du web, rares sont les sites qui mettent en œuvre cette pratique : certains ne reconnaissent pas les avantages de la césure, d’autres ne sont tout simplement pas au courant de la possibilité d’une telle pratique. Ci-dessous, un exemple concret de l’utilisation de cette propriété en CSS.

Règles de typographie

Afin de fournir aux lecteurs d’un texte un confort optimal, certaines règles de typographie ont été mises en place. La césure dans un texte est avant tout préconisée dans le but d’améliorer les espacements entre les mots. Ainsi, que ce dernier possède un alignement justifié ou que celui-ci soit classiquement aligné à gauche, la césure lui permet d’avoir des paragraphes plus ou moins uniformes visuellement parlant.

Il existe également plusieurs méthodes pour bien intégrer cette césure, celles-ci varient selon la langue utilisée pour un texte. En français comme anglais, la coupure des mots intervient à l’aide d’un tiret en fin de ligne. En espagnol catalan, un point médian est ajouté devant ce tiret…
Un mot est systématiquement coupé à la fin d’une syllabe.

Pour que la césure soit élégante, il y a quelques règles. La césure ne doit pas intervenir sur plus de trois lignes à la suite, ni sur les noms propres. Sur le Web, on pourrait par exemple contrer certains de ces effets non désirés en ajoutant une espace insécable   devant les mots posant un souci. Aussi, on ne coupe pas un mot de moins de quatre lettres et on ne laisse pas un demi-mot seul sur une ligne.

En CSS, c’est grâce à la propriété hyphens que peuvent être spécifiées ces mêmes notions typographiques à un texte.

Utilisation de la propriété hyphens en CSS

Afin d’utiliser de manière optimale hyphens pour la césure dans un texte, ci-après quelques lignes de code compatibles avec un nombre de navigateurs important.

.hyphen {
  /* "word-break" renseigne sur la façon dont doit être effectuée la césure. */
  /* "break-all" signifie que celle-ci peuvt être insérée entre chaque caractère. */
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  /* Le préfixe -webkit- est utilisé pour Safari. */
  /* Chrome ne supporte pas la propriété "hyphens" à l'heure actuelle. */
  -webkit-hyphens: auto;
  /* Le préfixe -moz- est utilisé pour Firefox. */
  -moz-hyphens: auto;
  /* La propriété "hyphens" est reconnue sur Internet Explorer */
  /* avec le préfixe -ms- à partir de la version 10 du navigateur. */
  -ms-hyphens: auto;
  /* "hyphens" utilisé de la manière la plus classique qu'il soit. */
  hyphens: auto;
}

Et en CSS4, ça donnera quoi ?

Dans un futur proche, il sera possible d’améliorer encore l’utilisation d’hyphens dans les feuilles de style. Avec CSS Text Level 4, de nouvelles propriétés apparaîtront et il sera alors possible de réellement gérer toutes les règles typographiques énoncées en préambule de cet article.

La propriété hyphenate-limit-chars – rajoutez les préfixes -ms-, -moz- et -webkit- pour en obtenir toutes ses déclinaisons – permet de préciser le nombre de caractères minimal d’un mot sur lequel on veut appliquer une césure, et les nombres de caractères minimaux avant et après la césure.
Prenons l’exemple situé ci-dessous qui correspond à la valeur par défaut de hyphenate-limit-chars. Ici, on indique au navigateur qu’un mot pourra être coupé s’il possède un minimum de cinq caractères (les mots de quatre lettres ou moins ne sont pas coupés). Si l’on souhaite un minimum de sept lettres pour l’application d’une césure, la valeur du premier chiffre doit être modifiée.
Toujours dans l’exemple ci-dessous, il faut qu’il y ait au minimum deux lettres avant la césure et deux lettres après la césure. Comme 5 2 2 est la valeur par défaut de cette propriété, il est possible de la remplacer ici avec le mot-clé auto.

hyphenate-limit-chars: 5 2 2;

Avec hyphenate-limit-lines, il sera désormais possible de préciser un nombre maximal de lignes consécutives sur lesquelles pourront être appliquées des césures. Comme susmentionné, en typographie, il est préconisé qu’il n’y ait pas trois lignes consécutives avec une césure. Pour respecter cette règle, nous pourrons utiliser cette nouvelle propriété de la manière suivante :

hyphenate-limit-lines: 2;

La propriété hyphenate-limit-zone permettra d’affiner la qualité de césure. Celle-ci définira (en pourcentage ou en unité de mesure telle que le pixel ou l’unité em) la largeur de la zone sur laquelle sera appliquée la césure. Ainsi, il sera possible de limiter à quarante pixels par exemple la zone sur laquelle on autorise la coupure des mots dans un bloc.

hyphenate-limit-zone: 40px;

La propriété hyphenate-character permettra de définir exactement quel caractère est à utiliser pour la césure des mots. Par défaut, un tiret - est ajouté pour les césures. Cette propriété est à utiliser en connaissance de cause pour donner un confort optimal à la lecture : il ne faudrait pas devenir trop fantaisiste. À noter que définir le caractère, il vous faudra utiliser sa correspondance ISO.

/* Dans l'exemple suivant, le caractère → est utilisé pour la césure. */
hyphenate-character: "\2192";

Enfin, hyphenate-limit-last, qui admet comme valeurs les mots-clés suivants none, always, column, page et spread, indique le comportement de la césure à la fin des éléments, des pages, des colonnes, etc.

La documentation complète sur la coupure des mots, the hyphenation, est disponible en anglais sur dev.w3.org. Celle-ci vous permettra de mieux appréhender les nouveautés liées à la césure en CSS.
Le tableau évolutif de Can I Use concernant la propriété hyphens est également un très bon outil. Il permet de savoir sur quels navigateurs cette propriété est prise en compte et quelles solutions existent pour contrer les effets indésirables.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.