Hyphens - Propriété CSS
Résumé des caractéristiques de la propriété hyphens
manual
| auto
| none
manual
hyphens
passe d'une valeur à l'autre sans transition.Schéma syntaxique de hyphens
.
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.
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ésurehyphenate-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.
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 valeurmanual
.
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 valeurnone
.
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 valeurauto
.
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 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.
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é.(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.
hyphens
.auto
pour la propriété hyphens
.Remarques :
(1) Supporté avec le préfix -ms-
.
automatique
auto
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.
Remarques :
(1) Firefox utilise un dictionnaire US.
(2) Safari utilise des dictionnaires différents pour en-GB et en-US.
latin
anglais
irlandais
Néerlandais
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
.27 Janvier 1999Document de travail.22 Décembre 2020Candidat à la recommandation. -
Module CSS - Texte - Niveau 4
Pas de changement concernant la propriétéhyphens
.22 Septembre 2015Document de travail.
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 :
text-align
).