Définition et utilisation da la propriété css hanging-punctuation
La propriété CSS hanging-punctuation permet de déterminer si les signes de ponctuation doivent être placés en dehors ou à l'intérieur du bloc de contenu. Cette propriété s'applique aux éléments en ligne et aux éléments de bloc.La Syntaxe CSS
Voici la syntaxe de cette propriété :
hanging-punctuation: none|first|last|allow-end|force-end;Les valeurs possibles pour cette propriété sont :
none : Désactive l'effet de suspension de la ponctuation. C'est la valeur par défaut.
first(ou last) :Suspend la première(ou la dernière) ponctuation à l'extérieur du bloc de contenu
force-end : Suspend toute ponctuation à la fin du bloc de contenu.
allow-end : Suspend toute ponctuation à la fin du bloc de contenu si elle ne dépasse pas de la ligne de base de la première ou de la dernière ligne de texte.
Voici un exemple d'utilisation de cette propriété :
Exemple 📋 Copier le code
p {
hanging-punctuation: first;
}
Cet exemple suspend la première ponctuation des paragraphes (par exemple, une virgule ou un point d'interrogation) à l'extérieur du bloc de contenu.
| Valeurs par défaut | none |
|---|---|
| Inherited: | oui |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.hangingPunctuation="first" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | Non supporté | Non supporté | Non supporté | 10 | Non supporté |
Créer un effet de ponctuation suspendue avec CSS
La propriété hanging-punctuation peut être utilisée pour créer un effet de suspension de la ponctuation, comme dans les livres imprimés où la ponctuation est souvent placée en dehors des marges. Cet effet peut être obtenu en utilisant la valeur first ou force-end.La valeur first suspend la première ponctuation à l'extérieur du bloc de contenu, tandis que la valeur force-end suspend toute ponctuation à la fin du bloc de contenu.
La valeur allow-end fonctionne de manière similaire à force-end, mais elle ne suspend la ponctuation à la fin du bloc de contenu que si elle ne dépasse pas de la ligne de base de la première ou de la dernière ligne de texte.
Voici un exemple plus détaillé d'utilisation de cette propriété :
Exemple 📋 Copier le code
/* Suspend la première ponctuation des paragraphes à l'extérieur du bloc de contenu ici c'et l'élément p*/
p {
hanging-punctuation: first;
}
/* Suspend toute ponctuation à la fin du bloc de contenu des citations : blockquote*/
blockquote {
hanging-punctuation: force-end;
}
/* Suspend toute ponctuation à la fin du bloc de contenu davec la classe signature si elle ne dépasse pas de la ligne de base de la première ou de la dernière ligne de texte */
.signature {
hanging-punctuation: allow-end;
}
Il est important de noter que cette propriété ne fonctionne que si elle est combinée avec une marge suffisamment grande pour accueillir la ponctuation suspendue. Si la marge est trop petite, la ponctuation sera placée à l'intérieur du bloc de contenu.Quelques astuces et conseils pour utiliser la propriété CSS hanging-punctuation dans votre design de site web :
1- Utilisez la valeur first pour suspendre la première ponctuation à l'extérieur du bloc de contenu. Cela peut être particulièrement utile pour les titres et les en-têtes.2- Utilisez la valeur force-end pour suspendre toute ponctuation à la fin du bloc de contenu. Cela peut être utile pour les citations ou les signatures de courriels.
3- Utilisez la valeur allow-end pour suspendre toute ponctuation à la fin du bloc de contenu si elle ne dépasse pas de la ligne de base de la première ou de la dernière ligne de texte. Cela peut être utile pour les signatures ou les blocs de texte avec une marge étroite.
4- Assurez-vous d'avoir une marge suffisamment large pour accueillir la ponctuation suspendue. Si la marge est trop petite, la ponctuation sera placée à l'intérieur du bloc de contenu.
5- Utilisez cette propriété avec parcimonie. Si vous l'utilisez trop souvent, cela peut devenir ennuyeux pour les utilisateurs et perturber la lisibilité du texte.
6- Testez votre design sur différents navigateurs et appareils pour vous assurer que la ponctuation suspendue s'affiche correctement. Certaines combinaisons de navigateurs et de polices de caractères peuvent ne pas être prises en charge.
Voici un exemple de page HTML et CSS qui met en évidence l'utilisation de la propriété CSS hanging-punctuation :
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 2em;
hanging-punctuation: first;
}
blockquote {
margin: 2em;
hanging-punctuation: force-end;
}
.signature {
margin: 2em;
hanging-punctuation: allow-end;
}
</style>
</head>
<body>
<h1>Exemple de la propriété CSS hanging-punctuation</h1>
<p>Voici un paragraphe avec une ponctuation suspendue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem urna. Aliquam vel justo vel velit feugiat tincidunt.</p>
<blockquote>Voici une citation avec une ponctuation suspendue. "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem urna. Aliquam vel justo vel velit feugiat tincidunt."</blockquote>
<div class="signature">Voici une signature avec une ponctuation suspendue. John Smith</div>
</body>
</html>
Dans cet exemple, nous avons défini la propriété hanging-punctuation pour les éléments p, blockquote et .signature avec les valeurs first, force-end et allow-end respectivement. Cela suspend la première ponctuation du paragraphe à l'extérieur du bloc de contenu, suspend toute ponctuation à la fin du bloc de contenu de la citation et suspend toute ponctuation à la fin du bloc de contenu de la signature si elle ne dépasse pas de la ligne de base de la première ou de la dernière ligne de texte.