Hanging-punctuation - Propriété CSS
Résumé des caractéristiques de la propriété hanging-punctuation
none | allow-end | first | force-end | lastnonehanging-punctuation passe d'une valeur à l'autre sans transition.Schéma syntaxique de hanging-punctuation.
hanging-punctuationLes liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG
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.
Valeurs globales
(communes à toutes les propriétés)
hanging-punctuation: initial (none)
hanging-punctuation: inherit
hanging-punctuation: revert
hanging-punctuation: revertLayer
hanging-punctuation: unset
Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.
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.
Manipulation de la propriété hanging-punctuation par programme.
Avec Javascript, modifier la valeur de hanging-punctuation.
Voici un exemple de code Javascript pour modifier la valeur de hanging-punctuation.
Deux syntaxes sont possibles : la première avec une notation kebab-case (typique de CSS), en la deuxième en camel-case (courante en Javascript).
let el = document.getElementById('id');
el.style['hanging-punctuation'] = 'force-end';
// ou
let el = document.getElementById('id');
el.style.hangingPunctuation = 'force-end';
Avec Javascript, lire la valeur de hanging-punctuation.
Pour relire la valeur de la propriété hanging-punctuation avec le code ci-dessous, il faut que la valeur ait été affectée directement à l'élément lui-même via son
attribut style, et non pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['hanging-punctuation'];
// ou
let el = document.getElementById('id');
let value = el.style.hangingPunctuation;
Avec Javascript, lire la valeur calculée de hanging-punctuation.
La valeur calculée est celle qui résulte des valeurs héritées et des règles de priorité (vior les Les priorités).
A défaut, a valeur calculée est la valeur initiale, soit none dans le cas de hanging-punctuation.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('hanging-punctuation');
Avec JQuery, modifier la valeur de hanging-punctuation.
$('#id').css('hanging-punctuation', 'force-end');
// ou
$('#id').css('hangingPunctuation', 'force-end');
Avec JQuery, lire la valeur calculée de hanging-punctuation.
let value = $('#id').css('hanging-punctuation');
Autres exemples de code.
Vous trouverez d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété hanging-punctuation et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée, ce qui, dans le cas de hanging-punctuation sera la même chose car cette propriété n'attend pas de valeur numérique.
Exemple interactif avec la propriété hanging-punctuation.
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.
Remarques :
(1) Safari ne supporte pas la valeur force-end.
hanging-punctuationNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la propriété hanging-punctuation.
-
Module CSS - Texte - Niveau 3
Introduction de la propriétéhanging-punctuation.
27 Janvier 1999Document de travail.
22 Décembre 2020Candidat à la recommandation.
-
Module CSS - Texte - Niveau 4
Pas de changement concernant la propriétéhanging-punctuation.22 Septembre 2015Document de travail.
Voir aussi, à propos de la gestion des textes.
La gestion des textes est ce qui est en rapport avec les ruptures, les césures, l'alignement des textes, etc. Ces spécifications sont regroupées dans le module
CSS Text Module. Outre la propriété hanging-punctuation, vous y trouverez les définitions suivantes :
Propriétés :
text-align).