La propriété hanging-punctuation vise à donner aux concepteurs de sites Web un contrôle plus fin de la typographie sur le Web.
L’idée derrière la ponctuation suspendue est de mettre des caractères de ponctuation dès le début (ou dans une moindre mesure à la fin) des éléments de texte « en dehors » de la boîte afin de préserver le flux de lecture.
Fondamentalement, il déplacerait légèrement cette citation, cette balle ou autre vers la gauche (ou la droite en mode rtl) afin que la première lettre soit correctement alignée avec le reste du document.
Veuillez noter que cette propriété est facultative afin que les fabricants de navigateurs puissent la prendre en charge ou non.
Syntaxe
hanging-punctuation: none | || last ]blockquote p { hanging-punctuation: first;} none
Aucun personnage ne se bloque. C’est la valeur par défaut de cette propriété.
first
Un caractère disponible au début de la première ligne formatée d’un élément se bloque.
last
Un caractère disponible à la fin de la dernière ligne formatée d’un élément se bloque.
force-end
Un arrêt ou une virgule à la fin d’une ligne est suspendu.
La ponctuation est forcée de s’accrocher et n’est pas prise en compte lors de la mesure de la ligne pour la justification.
allow-end
Un arrêt ou une virgule à la fin d’une ligne se bloque s’il ne correspond pas autrement avant la justification.
La ponctuation à la fin de la première ligne pour ne s’accroche pas car elle s’adapte sans s’accrocher. Sur la deuxième ligne cependant, il n’y a pas assez d’espace pour qu’il pend.
Caractères disponibles
| Code | Caractère | Nom |
|---|---|---|
U+002C |
, | VIRGULE |
U+002E |
. | ARRÊT COMPLET |
U+060C |
، | VIRGULE ARABE |
U+06D4 |
۔ | ARRÊT COMPLET ARABE |
U+3001 |
、 | VIRGULE IDÉOGRAPHIQUE |
U+3002 |
。 | POINT COMPLET IDÉOGRAPHIQUE |
U+FF0C |
， | VIRGULE PLEINE LARGEUR |
U+FF0E |
． | PLEINE LARGEUR ARRÊT COMPLET |
U+FE50 |
﹐ | PETITE VIRGULE |
U+FE51 |
﹑ | PETITE VIRGULE IDÉOGRAPHIQUE |
U+FE52 |
﹒ | PETIT ARRÊT COMPLET |
U+FF61 |
｡ | POINT IDÉOGRAPHIQUE DEMI-LARGEUR |
U+FF64 |
､ | VIRGULE IDÉOGRAPHIQUE À DEMI-LARGEUR |
Notez que les agents utilisateurs sont autorisés à ajouter n’importe quel caractère à cette liste. Citant la spécification:
L’UA peut inclure d’autres caractères, le cas échéant.
Propriétés connexes
text-indenttext-align
Autres Ressources
-
hanging-punctuationdans la spécification -
hanging-punctuationavec CSS par Steve Hickey
Ces données de support du navigateur proviennent de Caniuse, qui a plus de détails. Un chiffre indique que le navigateur prend en charge la fonctionnalité à cette version et plus.
Bureau
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| Non | Non | Non | Non | 10 |
Mobile / Tablette
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Non | Non | Non | 10.0-10.2 |
Une solution de rechange décente pour un navigateur non pris en charge serait d’utiliser un retrait de texte négatif ainsi:
blockquote p { text-indent: -0.5em; /* Change according to your font */} Pour les listes à puces, vous pouvez vous assurer que la position des puces est définie sur outside et que le débordement du conteneur n’est pas défini sur hidden.