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.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.
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.
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 (­
). - 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/>
). - 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. La valeur initiale est :
.manual
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.
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 par les navigateurs (compatibilité).
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
.
hyphens
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Omé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.
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que hyphens
.
Les spécifications CSS éditées par le W3C sont organisées en modules. hyphens
fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.