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 :

hanging-punctuation - Propriété CSS

hanging-punctuation

Résumé des caractéristiques de la propriété hanging-punctuation

Description rapide
Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
Statut
Problèmes de compatibilité
S'applique à
Éléments contenant du texte.
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
none | allow-end | first | force-end | last
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété hanging-punctuation 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 de la propriété hanging-punctuation.

Cette propriété encore très peu prise en charge. Il est un peu tôt pour l'utiliser (2022).

Le "hanging" (que l'on traduit parfois par "ponctuation suspendue" ou "ponctuation flottante") consiste à positionner certains signes de ponctuation dans la marge, afin de ne pas perturber l'alignement du texte. C'est une technique qui est surtout intéressante si le texte est justifié.

Ponctuation suspendue (hanging) en début de ligne.

Les deux paragraphes ci-dessous sont entourés de guillemets. Pour le deuxième, une ponctuation suspendue a été demandée. Compte-tenu du fait que peut de navigateurs traitent la ponctuation suspendue, nous avons simulé l'effet de hanging-punctuation avec la propriété text-indent.

"La ponctuation suspendue est généralement considérée comme une technique typographique sophistiquée. Avant la typographie numérique, cette pratique était fréquemment appliquée par des typographes expérimentés."

"Dans les premiers temps de l'ère numérique et de la composition de bureau, la ponctuation suspendue est devenue moins standard, car elle devait être créée manuellement, ce qui est une opération fastidieuse."

L'esthétique du deuxième bloc de texte est en effet meilleure que celle du premier.

Ponctuation suspendue (hanging) en fin de ligne.

Certains caractères peuvent également déborder dans la marge droite s'ils se trouvent à la fin de la ligne, c'est le cas systématique du tiret de césure, et parfois d'un point ou d'une virgule. La ponctuation suspendue à droite consiste à justifier le texte sans tenir compte du caractère de ponctuation final, ce qui aura pour effet de le rejeter ce dernier dans la marge.

Comparer les deux blocs de texte ci-dessous. Sur le deuxième la marge droite parait plus harmonieuse car la virgule de la première ligne a été repoussée dans le marge. Il s'agit d'une simulation (image), en attendant que hanging-punctuation soit mieux reconnue par les navigateurs.

Exemple sans hanging-puctuation
Marge sans hanging-puctuation
Exemple avec hanging-puctuation
Marge avec hanging-puctuation

Valeurs pour hanging-punctuation.

Syntaxe de hanging-punctuationSchéma syntaxique de la propriété CSS hanging-punctuation (gestion de la ponctuatnno suspendue). first first none none force-end force-end force-end force-end last lasthanging-punctuation:;hanging-punctuation:;Télécharger l'image en SVG
  • hanging-punctuation: none;

    Aucun traitement particulier n'est appliqué aux signes de ponctuation.

  • hanging-punctuation: first;

    Les signes de ponctuation qui se trouvent en début de la première ligne sont décalés dans la marge. Cette valeur agit sur les guillemets ouvrants, sous toutes leurs variantes : ", , «, , etc.

  • hanging-punctuation: last;

    Les signes de ponctuation qui se trouvent à la fin de la dernière ligne sont repoussés dans la marge. Ce qui veut dire concrètement que la justification du texte ne prend pas en compte la largeur du signe de ponctuation. Ce dernier déborde donc de la ligne.

    Cette valeur agit sur les guillemets fermants : ", , », , etc.

  • hanging-punctuation: allow-end;

    Les signes de ponctuation qui se trouvent à la fin d'une ligne peuvent être repoussés dans la marge, si l'espace restant sur la ligne n'est pas suffisant pour les contenir. Les repousser dans la marge évite, dans ce cas, de rejeter le mot complet à la ligne suivante.

    Cette valeur concerne les signes de ponctuation tels que le point, la virgule, le tiret, etc.

  • hanging-punctuation: force-end;

    Les signes de ponctuation qui se trouvent à la fin d'une ligne sont systématiquement repoussés dans la marge. Ce qui veut dire concrètement que la justification du texte ne prend pas en compte la largeur du signe de ponctuation. Ce dernier déborde donc de la ligne.

    Cette valeur concerne les signes de ponctuation tels que le point, la virgule, le tiret, etc.

  • hanging-punctuation: initial; hanging-punctuation: inherit; hanging-punctuation: revert; hanging-punctuation: revert-layer; hanging-punctuation: unset;

    La valeur initiale est : none.

Animation de la propriété hanging-punctuation.

Pour l'instant la propriété hanging-punctuation n'est pas suffisamment prise en charge pour qu'une démo d'animation soit pertinente.

Simulateur.

Vous pouvez ajuster la largeur du bloc de texte ci-dessous afin de positionner une signe de ponctuation à la fin d'une ligne, et observer l'effet de la propriété hanging-punctuation.

hanging-punctuation :
"Aujourd'hui, d'énormes progrès ont été réalisés dans les capa­cités typo­gra­phi­ques des logi­ciels de mise en page. L'acti­va­tion de la fonction d'ali­gne­ment de la marge optique, non seulement suspend la ponc­tuation appro­priée à l'ex­té­rieur du cadre de texte, mais ajuste éga­le­ment d'au­tres carac­tè­res pou­vant per­tur­ber l'ali­gne­ment, notam­ment A, T, V, W, Y et, dans cer­tains cas, le chif­fre 1."

Prise en charge par les navigateurs (compatibilité).

Il y a encore beaucoup à faire pour que cette propriété soit correctement gérée par les navigateurs.

1
hanging-punctuation
Estimation de la prise en charge en pourcentage du parc actuel.
18%

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

Voir aussi, dans le même module de standardisation que hanging-punctuation.

Les spécifications CSS éditées par le W3C sont organisées en modules. hanging-punctuation 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 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.
Césure des mots.
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.