La hanging-punctuationpropriété vise à donner aux concepteurs Web un contrôle plus fin sur la typographie sur le Web.
L'idée derrière la ponctuation suspendue est de mettre certains caractères de ponctuation du début (ou dans une moindre mesure à la fin) des éléments de texte «à l'extérieur» de la boîte afin de préserver le flux de lecture.
Fondamentalement, cela déplacerait légèrement cette citation, puce ou autre vers la gauche (ou la droite en rtlmode) 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 ou non la prendre en charge.
Syntaxe
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Aucun personnage ne se bloque. Il s'agit de 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 se bloque.
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 rentre pas autrement avant la justification.
La ponctuation à la fin de la première ligne pour ne se bloque pas car elle tient sans accrocher. Sur la deuxième ligne, cependant, il n'y a pas assez d'espace, donc il est suspendu.
Caractères disponibles
| Code | Personnage | Nom |
|---|---|---|
U+002C | , | VIRGULE |
U+002E | . | ARRÊT COMPLET |
U+060C | ، | COMMA ARABE |
U+06D4 | ۔ | ARRÊT COMPLET ARABE |
U+3001 | 、 | COMMA IDÉOGRAPHIQUE |
U+3002 | 。 | BUT PLEIN IDÉOGRAPHIQUE |
U+FF0C | ， | COMMA PLEINE LARGEUR |
U+FF0E | ． | BUT PLEIN PLEINE LARGEUR |
U+FE50 | ﹐ | PETIT COMMA |
U+FE51 | ﹑ | PETIT COMMA IDÉOGRAPHIQUE |
U+FE52 | ﹒ | PETIT BUT PLEIN |
U+FF61 | ｡ | BUT PLEIN IDÉOGRAPHIQUE DEMI-LARGEUR |
U+FF64 | ､ | COMMA 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.
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| Non | Non | Non | Non | dix |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| Non | Non | Non | 10,0-10,2 |
Une solution de secours décente pour un navigateur non pris en charge serait d'utiliser un retrait de texte négatif comme suit:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )Pour les listes à puces, vous souhaiterez peut-être vous assurer que la position des puces est définie sur outsideet que le débordement du conteneur n'est pas défini sur hidden.