Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

hyphens - Propriété CSS

hyphens

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

Description rapide
Césure des mots.
Statut
Standard
S'applique à
Éléments contenant du texte.
Type de valeur
Valeur prédéfinie
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:: CRD (document proposé pour la recommandation)

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.

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.

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.

Syntaxe de hyphensSchéma syntaxique de la propriété CSS hyphens none none manual manual auto autohyphens:;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.

  • hyphens: initial; hyphens: inherit; hyphens: revert; hyphens: revert-layer; hyphens: unset;

    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.

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.

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

Colonne 1
Capacité pour les navigateur d'effecteur la césure automatique des mots, en respectant les règles linguistiques.
Colonne 2
Prise en charge de la propriété hyphens.
1
Automatic hyphenation
2
hyphens
Estimation de la prise en charge en pourcentage du parc actuel.
93%
96%

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.

1
Latin
2
Irish
3
Néerlandais
Estimation de la prise en charge en pourcentage du parc actuel.
77%
74%
91%

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.

Propriétés.

Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Définit le caractère qui sera à utiliser comme marque de césure.
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
Définit le nombre maximal de lignes successives se terminant une césure
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
Espacement des lettres.
Rupture de lignes pour les langues CJK (chinois, japonais, coréen).
Gestion des coupures de mots.
Taille des caractères de tabulation.
Alignement du texte.
Définit l'alignement des lignes d'un texte.
Alignement de la dernière ligne des paragraphes.
Définit l'espace entre les caractères adjacents (CJK).
Définit le retrait de la première ligne des paragraphe (indentation).
Sélectionne la méthode utilisée pour justifier le texte.
Définit comment gérer les espaces et les espaces multiples dans le texte.
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
Definit l'espacement autour des caractères de ponctuation CJK.
Casse du texte (minuscules, majuscules...).
Définit la gestion des retours à la ligne du texte.
Définit la gestion des espaces multiples et des retours chariot.
Définit comment les espaces successifs doivent être réduits.
Définit si comment le navigateur doit supprimer les espaces réductibles.
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
Substitue certains caractères de séparation de mots par d'autres.
Coupure des mots longs.
Normalise les caractères d'espacement (écritures CJK).
Permet d'ajuster l'espacement des mots.
Coupure des mots.