Propriété CSS hanging-punctuation

La propriété CSS hanging-punctuation contrôle si un signe de ponctuation — tel qu'un guillemet ouvrant ou fermant, une virgule ou un point — doit déborder au-delà du bord de début ou de fin d'une boîte de ligne, au lieu d'être positionné à l'intérieur de la zone de contenu.

Cette technique est issue de la typographie imprimée : lorsqu'un paragraphe commence par un guillemet ouvrant, laisser ce signe à gauche du bord gauche du texte maintient un alignement optique des lettres. La même idée s'applique à la ponctuation de fin — un point ou une virgule en débord conserve un bord droit net pour un paragraphe justifié.

La prise en charge par les navigateurs est limitée. En 2026, hanging-punctuation n'est supporté que dans Safari (moteur WebKit). Chrome, Edge et Firefox l'ignorent. Traitez-le comme une amélioration progressive — si le navigateur ne le supporte pas, le texte s'affiche simplement sans débord, ce qui est un repli tout à fait sûr.

Valeur initiale	`none`
S'applique à	Tous les éléments
Hérité	Oui
Animatable	Non
Version	CSS3
Syntaxe DOM	`object.style.hangingPunctuation = "first last";`

Syntaxe

hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;
hanging-punctuation: force-end;

/* Combine edge keywords */
hanging-punctuation: first last;
hanging-punctuation: first allow-end;
hanging-punctuation: first force-end;
hanging-punctuation: last allow-end;
hanging-punctuation: last force-end;

/* Global values */
hanging-punctuation: initial;
hanging-punctuation: inherit;
hanging-punctuation: unset;

Jusqu'à trois mots-clés peuvent apparaître dans une même déclaration : au plus un mot-clé de bord de début (first), au plus un mot-clé de bord de fin (last), et au plus un mot-clé de milieu de ligne (allow-end ou force-end).

Quels caractères débordent ?

La spécification CSS définit les caractères « en débord » comme suit :

Ponctuation ouvrante qui déborde au début : ", ', «, ‹, et leurs équivalents est-asiatiques.
Ponctuation fermante qui déborde à la fin : ", ', », ›, ., ,, !, ?, 。, 、, et similaires.

Seuls les caractères situés sur le bord extérieur d'une ligne sont candidats — la ponctuation intérieure d'une ligne n'est pas affectée.

Valeurs

Valeur	Description
`none`	Aucune ponctuation ne déborde. C'est la valeur par défaut.
`first`	Un signe de ponctuation ouvrant au début de la première ligne déborde au-delà du bord de début de la boîte.
`last`	Un signe de ponctuation fermant à la fin de la dernière ligne déborde au-delà du bord de fin de la boîte.
`allow-end`	Un signe de ponctuation fermant à la fin d'une ligne déborde uniquement s'il ne rentre pas autrement avant l'application de la justification.
`force-end`	Un signe de ponctuation fermant à la fin de chaque ligne déborde toujours, qu'il aurait pu tenir ou non.
`initial`	Réinitialise à la valeur par défaut (`none`).
`inherit`	Hérite de la valeur calculée de l'élément parent.
`unset`	Réinitialise à la valeur héritée si la propriété est héritée (ce qui est le cas), ce qui revient effectivement à `inherit`.

`allow-end` vs `force-end`

La distinction entre ces deux valeurs de débord de fin est subtile mais importante :

allow-end — fait déborder la ponctuation de fin uniquement lorsqu'elle ne tiendrait pas sur la ligne avant que la justification prenne effet. En d'autres termes, le navigateur n'utilise le débord qu'en dernier recours pour éviter des espaces de justification gênants.
force-end — fait toujours déborder la ponctuation de fin dans la marge sur chaque ligne, quelle que soit la place disponible. Cela peut créer une marge optique cohérente mais peut paraître étrange sur les lignes courtes.

Utilisez allow-end pour le texte courant lorsque vous souhaitez de la subtilité ; utilisez force-end lorsque vous voulez un alignement de marge optique strict, similaire aux systèmes de composition traditionnels.

`hanging-punctuation: first`

La valeur first permet à un signe de ponctuation ouvrant sur la première ligne de déborder au-delà du bord de début (gauche, en texte LTR) de la boîte contenante. Le résultat est que le corps du texte reste aligné optiquement tandis que le guillemet ouvrant flotte dans la marge.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      blockquote {
        font-style: normal;
        font-size: 25px;
        width: 20em;
        border-left: 1px solid #000;
        padding: 3rem 0;
        hanging-punctuation: first;
      }
    </style>
  </head>
  <body>
    <h2>Hanging-punctuation property example</h2>
    <blockquote>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s".</blockquote>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS hanging-punctuation](/uploads/media/default/0001/04/da969d68b09b2be6083c7027f773927d30f8cabe.png "CSS hanging-punctuation property result" =420x)

Le caractère " ouvrant se déplace à gauche de la ligne de bordure, de sorte que le L de Lorem s'aligne visuellement avec les lignes situées en dessous.

`hanging-punctuation: last`

La valeur last fait déborder un signe de ponctuation fermant — tel qu'un point, une virgule ou un guillemet fermant sur la dernière ligne — au-delà du bord de fin (droit, en texte LTR) de la boîte. C'est particulièrement utile pour le texte aligné à droite ou justifié, où un signe de ponctuation dans la marge évite un bord optique irrégulier.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 22px;
        width: 16em;
        text-align: justify;
        border-right: 1px solid #000;
        padding: 1rem 0;
        hanging-punctuation: last;
      }
    </style>
  </head>
  <body>
    <h2>hanging-punctuation: last</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry, used here to show a trailing punctuation mark.
    </p>
  </body>
</html>

Le point final à la fin du paragraphe se déplace à droite de la bordure, conservant le bord droit du bloc justifié optiquement propre.

Combinaison de valeurs

Vous pouvez combiner first, last, et un des mots-clés de débord de fin dans une seule déclaration. L'ordre des mots-clés n'a pas d'importance :

/* Hang opening quote at start AND closing punctuation at end */
blockquote {
  hanging-punctuation: first last;
}

/* Hang opening quote at start, and allow end-punctuation to hang when needed */
p {
  hanging-punctuation: first allow-end;
}

Combiner first last est un motif typographique courant pour les blocs de citation : le " ouvrant déborde en haut à gauche et le " ou . fermant déborde en bas à droite.

Conseils d'utilisation pratique

Associez avec text-indent pour l'alignement optique. Si vous définissez un text-indent négatif sur un conteneur, hanging-punctuation: first et text-indent peuvent entrer en conflit. Préférez hanging-punctuation à un retrait négatif manuel — c'est sémantiquement correct et se dégrade gracieusement.

Associez avec le texte justifié. hanging-punctuation: last et force-end fonctionnent mieux avec text-align: justify (voir text-align). Sur du texte aligné à gauche, l'effet est généralement invisible à moins que la dernière ligne se termine exactement au bord de la boîte.

Utilisez sur <blockquote> et les citations en exergue. Ces éléments commencent presque toujours par un guillemet ouvrant, ce qui fait de hanging-punctuation: first l'endroit le plus impactant et le moins risqué où l'appliquer.

Amélioration progressive — pas besoin de @supports. Puisque la propriété est héritée et se dégrade vers none, vous pouvez l'appliquer en toute sécurité sans requête de fonctionnalité :

blockquote {
  hanging-punctuation: first last; /* ignored by Chrome/Edge/Firefox; used by Safari */
}

Propriétés associées

Ces propriétés sont couramment utilisées en parallèle avec hanging-punctuation pour affiner la typographie :

text-align — définit l'alignement horizontal ; justify rend le débord de la ponctuation de fin le plus visible.
text-justify — contrôle la façon dont le texte justifié distribue l'espace entre les mots et les caractères.
text-indent — indente la première ligne d'un bloc ; peut être combiné avec hanging-punctuation: first.
hyphens — contrôle la césure automatique ; combiné avec hanging-punctuation, il offre un contrôle typographique complet sur les fins de ligne.
white-space — régit la façon dont les espaces blancs et les sauts de ligne dans le texte sont gérés.

Exercice

Pratique

Que fait la propriété hanging-punctuation en CSS ?

Détermine si les éléments peuvent se chevaucher les uns les autres.Permet à un signe de ponctuation d'être positionné en dehors du bord de la boîte de ligne.Généralise l'idée d'insérer du contenu avant ou après le contenu d'un élément.Positionne les signes de ponctuation au centre de la boîte de ligne.