Gérer les traits d'union avec le CSS

Joe Medley
Joe Medley

Dans de nombreuses langues écrites, il est possible de casser des lignes entre les syllabes ainsi qu'entre les mots. Cela permet souvent d'ajouter plus de caractères sur une ligne de texte afin d'avoir moins de lignes dans une zone de texte et d'économiser ainsi de l'espace. Dans ces langues, la coupure publicitaire est indiquée par un trait d'union ("-").

Le module de texte CSS niveau 3 définit une propriété des traits d'union pour contrôler à quel moment les traits d'union sont présentés aux utilisateurs et leur comportement. À partir de la version 55, Chrome implémente la propriété des traits d'union. Conformément à la spécification, la propriété des traits d'union comporte trois valeurs: none, manual et auto. Pour illustrer cela, nous devons utiliser un trait d'union doux (­), comme dans l'exemple suivant.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

Un trait d'union léger ne s'affiche que lorsqu'il se trouve dans la marge de fin. L'affichage de ce trait d'union dans Chrome 55 ou version ultérieure dépend de la valeur de la propriété CSS hypens.

-webkit-hyphens: manual;
hyphens: manual;

La combinaison de ces éléments donne un résultat comme celui-ci:

Capture d'écran d'une seule ligne

Notez qu'il n'est pas visible. Dans tous les cas, lorsqu'un mot contenant le trait d'union doux tient sur une seule ligne, le tiret est invisible. Voyons maintenant le comportement des trois valeurs de trait d'union.

Aucun

Dans le premier exemple, la propriété des traits d'union est définie sur none. Cela empêche l'affichage du trait d'union doux. Vous pouvez le vérifier en ajustant la taille de la fenêtre afin que le mot "elit" ne rentre pas dans la ligne de texte visible.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Manuel

Dans le deuxième exemple, la propriété des traits d'union est définie sur manual, ce qui signifie que le trait d'union n'apparaît que lorsque la marge rompt le mot "elit". Vous pouvez le vérifier en ajustant la taille de la fenêtre.

Google ipsum dolor sit amet, consectetur adipiscing elit.

En mode automatique

Dans le troisième exemple, la propriété des traits d'union est définie sur auto. Dans ce cas, aucun trait d'union n'est nécessaire, car le user-agent détermine automatiquement l'emplacement des traits d'union. Si vous redimensionnez la fenêtre, vous constaterez que le navigateur associe cet exemple au même endroit que dans le second, bien qu'il n'y ait pas de trait d'union doux. Si vous continuez à réduire la fenêtre, vous constaterez que votre navigateur est capable de briser les lignes entre deux syllabes du texte.

Google ipsum dolor sit amet, consectetur adipiscing elit.