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 :

CSS - Propriété hanging-punctuation

Description de la propriété hanging-punctuation.

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

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

  • hanging-punctuation: none;

    Valeur par défaut. 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;

    La valeur initiale est auto.

  • hanging-punctuation: unset; hanging-punctuation: inherit;

    Reportez-vous à la description générale de ces valeurs.

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.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Ajout de contenu - Propriétés.

Ajout de contenu - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @counter-style : Définition d'un compteur personnalisé.

Ajout de contenu - Fonctions.

  • attr() : Renvoie la valeur d'un attribut.
  • counter() : Renvoie la valeur actuelle d'un compteur.
  • counters() : Renvoie la valeur d'un compteur hiérarchique.