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)
 🡇  
 🡅  
Statut du document: WD (document de travail)

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

Schéma syntaxique de hyphens.

Hyphens property - Syntax diagramSyntax diagram of the hyphens CSS property. See stylescss.free.fr for details. none none manual manual auto autohyphens:;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 :

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 illus­tra­tion 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 illus­tra­tion 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 :

Phrase avec des tirets de césure ( &shy; ) :

Souvent, les gens savent que c'est le pro­duit qu'ils veu­lent seule­ment une fois qu'on le leur a pré­senté.(1)

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-.

1
Césure
automatique
2
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

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.

Remarques :

(1) Firefox utilise un dictionnaire US.

(2) Safari utilise des dictionnaires différents pour en-GB et en-US.

1
Dictionnaire
latin
2
Dictionnaire
anglais
3
Dictionnaire
irlandais
4
Dictionnaire
Néerlandais
Estimation de la prise en charge globale.
78%
96%
75%
94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Historique de la propriété hyphens.

  • Module CSS - Texte - Niveau 3

    Le niveau 3 de la spécification introduit la propriété hyphens.
    WD
    27 Janvier 1999
    Document de travail.
    CR
    22 Décembre 2020
    Candidat à la recommandation.
    PR
    REC
  • Module CSS - Texte - Niveau 4

    Pas de changement concernant la propriété hyphens.
    WD
    22 Septembre 2015
    Document de travail.
    CR
    PR
    REC

Voir aussi, à propos de la gestion des textes.

La césure automatique des textes est une fonctionnalité décrite dans le module CSS Text Module, ainsi que tout ce qui est relatif à la gestion des textes : alignement, débordements, espacements, etc. Vous trouverez dans cette norme la description de la propriété hyphens et des propriétés suivantes :

Propriétés :

hanging-punctuation
Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
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.
letter-spacing
Espacement des lettres.
line-break
Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).
line-padding
Ajoute un espace au début et à la fin des lignes.
overflow-wrap
Gestion des coupures de mots pour les langues CJK et quelques autres.
tab-size
Définit la taille des caractères de tabulation.
text-align
Spécifie comment doit être aligné le texte de l'élément.
text-align-all
Définit l'alignement des lignes d'un texte (synonyme de text-align).
text-align-last
Définit l'alignement de la dernière ligne des paragraphes.
text-autospace
Définit l'espace entre les caractères adjacents (utilisable pour les langues CJK).
text-group-align
text-indent
Définit le retrait de la première ligne des paragraphe (indentation).
text-justify
Sélectionne la méthode utilisée pour justifier le texte.
text-space-collapse
Définit comment gérer les espaces et les espaces multiples dans le texte.
text-space-trim
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
text-spacing
text-spacing-trim
Definit l'espacement autour des caractères de ponctuation CJK.
text-transform
Casse du texte (minuscules, majuscules...).
text-wrap
Définit la gestion des retours à la ligne du texte.
text-wrap-mode
Définit si les retours à la ligne sont autorisés.
text-wrap-style
Définit comment les saut de ligne vont se faire.
white-space
Définit comment sont restitués les espaces multiples et les retours chariot.
white-space-collapse
Définit comment les espaces successifs et les retours à la ligne doivent être traités.
white-space-trim
Définit si comment le navigateur doit supprimer les espaces réductibles.
word-boundary-detection
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
word-boundary-expansion
Substitue certains caractères de séparation de mots par d'autres.
word-break
Coupure des mots longs.
word-space-transform
Normalise les caractères d'espacement (écritures CJK).
word-spacing
Permet d'ajuster l'espacement des mots.
word-wrap
Coupure des mots pour les langues CJK et quelques autres.
wrap-after
Autorise ou non les sauts de lignes après la boite.
wrap-before
Autorise ou non les sauts de lignes avant la boite.
wrap-inside
Autorise ou non les sauts de lignes dans la boite.