Hyphens - Propriété CSS

hyphens

Résumé des caractéristiques de la propriété `hyphens`

Description rapide

Définit si les mots peuvent être coupés en fin de ligne. La césure des mots donne une mise en page plus agréable mais peut être gênante dans certains cas.

Statut

Standard

S'applique à

Éléments contenant du texte.

Utilisable sur

HTML

Valeurs prédéfinies

manual | auto | none

Pourcentages

Ne s'appliquent pas.

Valeur initiale

manual

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété hyphens passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Texte

Références (W3C)

🡇

🡅

CSS Text Module Level 4

Statut du document: WD (document de travail)

CSS Text Module Level 3

Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de `hyphens`.

Schéma syntaxique de la propriété hyphens.
Les liens du schéma donnent accès à plus de détails.

Description.

Définit la césure des mots, c'est à dire s'ils peuvent être coupés en fin de ligne. En général la coupure d'un mot se traduit pas l'ajout d'un tiret à la fin de la ligne.

La césure des mots permet une mise en page plus agréable : cela permet d'ajuster la longueur des lignes pour les rendre comparables. Si le texte est justifié, la césure évite de devoir ajouter de trop grands espaces entre les mots.

Ce texte ne comporte pas de césures : les mots qui ne tiennent pas en fin d'une ligne sont rejetés entièrement sur la ligne suivante. Si les lignes sont courtes, cela peut donner un rendu peu esthétique.

Ce deuxième texte comporte des césures : les mots qui ne tiennent pas en fin d'une ligne sont coupés et une partie seulement du mot est rejetée sur la ligne suivante. Le résultat est plus esthétique.

Sur un texte justifié qui ne comporte pas de césures, les mots risquent d'être très espacés, surtout si les lignes sont courtes. Là aussi, le rendu est peu esthétique.

Si le texte justifié comporte des césures, il est possible de couper les mots, ce qui limitera la nécessité d'insérer de grands espaces entre eux. Le résultat est plus esthétique.

Paramétrage de la césure automatique.

Les règles de césure sont dépendantes de la langue. Pour cette raison, le fonctionnement de cette propriété avec la valeur auto (c'est le navigateur qui détermine où couper les mots) nécessite la présence d'un attribut lang soit sur l'élément lui-même, soit sur un de ses parents.

Plusieurs propriétés ont récemment été ajoutées pour permettre un réglage précis de la césure automatique :

hyphenate-character : Définit le caractère qui sera à utiliser comme marque de césure.
hyphenate-limit-chars : Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
hyphenate-limit-last : Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
hyphenate-limit-lines : Définit le nombre maximal de lignes successives se terminant une césure
hyphenate-limit-zone : Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.

Césure manuelle.

Il est toujours possible d'insérer le caractère  (tiret de césure) aux endroits où il est pertinent de couper les mots. Le tiret de césure est invisible lorsqu'il n'est pas nécessaire de couper le mot, mais s'affiche lorsque le mot est coupé à cet endroit.

N'utilisez pas le tiret classique, disponible sur les claviers, pour marquer un emplacement de césure car ce caractère reste visible même si le mot n'est pas coupé à cet endroit. Et il suffit que l'internaute modifie la largeur de la fenêtre pour que les césures ne se fassent plus au mêmes endroits.

Il existe aussi une balise wbr qui crée une opportunité de saut de ligne mais qui ne fait pas apparaître le tiret.

La solution manuelle présente cependant plusieurs inconvénients :

C'est extrêmement long et fastidieux. Ce qui rend la méthode manuelle inutilisable sur un grand texte.
Les tirets de césure qui sont insérés un peu partout dans le texte perturbent les recherches et la vérification d'orthographe.

Empêcher la césure.

Il arrive que l'on souhaite éviter une césure à un endroit où elle serait normalement permise parce qu'il y a un espace. Par exemple entre une valeur numérique et son unité, ou au milieu d'un nombre. Le caractère   (blanc insécable) s'affiche comme un espace mais n'autorise pourtant pas la césure.

Vous pouvez ajuster les dimensions de ce bloc, et constater que le montant de 2 400 € n'est jamais coupé ni jamais séparé de son unité monétaire.

Valeurs pour `hyphens`.

hyphens: manual;

Les mots sont coupés à l'emplacement des tirets ( - ) ou des tirets de césure ().

Ce texte est une illustration pour la valeur manual.
Il y a des tirets de césure dans illustration.
hyphens: none;

Les mots ne sont pas coupés, même s'ils comportent des tirets ou des tirets de césure. Le seul caractère qui permet le retour à la ligne est donc l'espace (ou bien entendu la balise <br>).

Ce texte est une illustration pour la valeur none.
Il y a des tirets de césure dans illustration.
hyphens: auto;

L'emplacement des coupures de mots est déterminé de façon automatique par le navigateur.

Cela ne marche pas trop mal pour la langue française, à condition que l'attribut lang="fr" soit présent dans le document HTML.

Ce texte est une illustration pour la valeur auto.
Il ne comporte pas de tiret de césure.
hyphens: initial; (manual) hyphens: inherit; hyphens: revert; hyphens: revertLayer; hyphens: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `hyphens`.

L'animation de hyphens ne présente pas grand intérêt. Il y a un petit exemple ci-dessous avec un texte qui ne comporte aucun tiret de césure manuel. Vous pouvez changer les dimensions du bloc pour favoriser la nécessité de césures.

Parmi les phobies les plus rares il y a l'hexakosioihexekontahexaphobie qui est a peur du nombre 666 (le chiffre de la Bête).

Simulateur avec la propriété `hyphens`.

En modifiant la largeur du bloc ci-dessous, vous pouvez faire en sorte que le mot "anticonstitutionnellement" entre ou non sur la première ligne du texte. La propriété CSS hyphens détermine si le mot est coupé ou pas.

Remarque : l'attribut lang="fr" a été précisé dans le code HTML.

hyphens :

manual

auto

none

Phrase avec des tirets de césure (  ) :

Souvent, les gens savent que c'est le produit qu'ils veulent seulement une fois qu'on le leur a présenté.⁽¹⁾

Phrase sans tirets de césure :

Souvent, les gens savent que c'est le produit qu'ils veulent seulement une fois qu'on le leur a présenté.

(1) Citation de Steve Jobs (fondateur d'Apple).

Prise en charge de `hyphens` par les navigateurs.

Le premier tableau ci-dessous montre la possibilité de césure automatique sur les différents navigateurs, ainsi que le traitement de la propriété hyphens.

Mais la césure automatique nécessite un dictionnaire spécifique à chaque langue : les endroits dans le mot où les césures sont autorisées sont en effet dépendant de la langue. Le deuxième tableau indique quelles sont les langues pour lesquelles un dictionnaire de césure est disponible.

Colonne 1

Support de la césure automatique des mots en fin de ligne et donc de la propriété hyphens.

Colonne 2

Support de la valeur auto pour la propriété hyphens.

Remarques :

(1) Supporté avec le préfix -ms-.

Césure
automatique

Valeur
auto

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari sur IOS

Opéra

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

Chrome

Safari

Firefox

Edge

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Dictionnaires de césures disponibles.

Le tableau ci-dessous représente la disponibilité des dictionnaires de césure en fonction des langues. Nous n'avons représenté que trois des langues les plus utilisées en Europe, mais beaucoup d'autres dictionnaires sont disponibles sur certains navigateurs. Reportez-vous au site Caniuse pour des informations plus complètes.

Colonne 1

Dictionnaire de césure pour les langues latines.

Colonne 2

Dictionnaire de césure pour l'anglais.

Colonne 3

Dictionnaire de césure pour l'irlandais.

Colonne 4

Dictionnaire de césure pour le néerlandais.