hanging-punctuation - Propriété CSS
Résumé des caractéristiques de la propriété hanging-punctuation
none
| allow-end
| first
| force-end
| last
none
hanging-punctuation
passe d'une valeur à l'autre sans transition.Description de la propriété hanging-punctuation
.
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.
Valeurs pour hanging-punctuation
.
- 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
.
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.
hanging-punctuation
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.