Hyphens - Propriété CSS

Schéma syntaxique de hyphens.

Description de la propriété hyphens.

La propriété hyphens 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.

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.

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

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.

D'autre part, plusieurs propriétés ont récemment été ajoutées pour permettre un réglage précis de la césure automatique :

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 comporte des tirets de césure dans le mot "illus­tra­tion".
• 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 comporte des tirets de césure.
• 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 les langues française ou anglaise, à condition que l'attribut lang 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.

Simulateur avec la propriété hyphens.

En modifiant la largeur du bloc ci-dessous, vous pouvez faire en sorte qu'il y ait besoin de couper certains mots. La propriété CSS hyphens détermine si ces mot sont coupés ou pas.

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

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

Remarques :

(1) Nécessite la présence du préfixe -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

1

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

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

Remarques :

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

(2) Firefox utilise un dictionnaire 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

2

Chrome

Safari

1

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

2

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

2

KaiOS Browser

Opéra mini

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

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la propriété hyphens.

• Module CSS - Texte - Niveau 3

  Ce module de spécification niveau 3 définit les contrôles typographiques de CSS, c'est à dire les règles de transformation d'un texte source en texte formaté, avec retours à la ligne. De nombreuses propriétés contrôlent l'alignement et la justification des textes, les règles de césure, l'espacements des caractères ou des mots, le regroupement des espaces successifs, etc.
  Ces règles sont souvent dépendantes du langage, il est donc conseillé aux auteurs de spécifier la langue dans lequel le texte est écrit (attribut lang pour le HTML). Il peut même être nécessaire de préciser le système d'écriture utilisé en particulier pour les langues coréenne, japonaise, mongolienne, etc. A défaut la mise en forme typographique sera moins fine.

  Concernant hyphens. Le niveau 3 de la spécification introduit la propriété hyphens.
  

  27 Janvier 1999

  Document de travail.

  

  22 Décembre 2020

  Candidat à la recommandation.

  

  

• Module CSS - Texte - Niveau 4

  Ce niveau 4 de ce module de spécification décrit les propriétés qui agissent sur les règles typographiques : alignement et justification du texte, espacement des mots ou des caractères, règles de césure, etc.
  Par rapport au niveau 3, plusieurs nouvelles propriétés ont été ajoutées, en particulier concernant les ruptures en fin de lignes, les césures, les espacements avant et/ou après le texte, etc.

  Concernant hyphens. Pas de changement concernant la propriété hyphens.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, à propos de la gestion des textes.

La césure automatique des textes est une fonctionnalité décrite dans le module Module CSS - Texte, 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 :