Proprietà CSS hanging-punctuation

La proprietà CSS hanging-punctuation controlla se un segno di punteggiatura — come un guillemetto di apertura o chiusura, una virgola o un punto — debba sporgersi fuori dal bordo iniziale o finale di un line box invece di rimanere all'interno dell'area del contenuto.

La tecnica proviene dalla tipografia a stampa: quando un paragrafo inizia con un guillemetto di apertura, lasciare che quel segno si trovi a sinistra del margine sinistro del testo mantiene le lettere otticamente allineate. Lo stesso principio si applica alla punteggiatura finale — un punto o una virgola sporgente mantiene il bordo destro di un paragrafo giustificato visivamente pulito e netto.

Il supporto browser è limitato. A partire dal 2026, hanging-punctuation è supportata solo in Safari (motore WebKit). Chrome, Edge e Firefox la ignorano. Trattala come un miglioramento progressivo — quando il browser non la supporta, il testo viene semplicemente visualizzato senza la punteggiatura sporgente, il che è un fallback perfettamente sicuro.

Valore iniziale	`none`
Si applica a	Tutti gli elementi
Ereditata	Sì
Animabile	No
Versione	CSS3
Sintassi DOM	`object.style.hangingPunctuation = "first last";`

Sintassi

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;

In una singola dichiarazione possono comparire fino a tre parole chiave: al massimo una parola chiave per il bordo iniziale (first), al massimo una per il bordo finale (last) e al massimo una per la metà della riga (allow-end o force-end).

Quali caratteri sporgono?

La specifica CSS definisce i caratteri "sporgenti" come:

Punteggiatura di apertura che sporge all'inizio: ", ', «, ‹ e i loro equivalenti dell'Asia orientale.
Punteggiatura di chiusura che sporge alla fine: ", ', », ›, ., ,, !, ?, 。, 、 e simili.

Solo i caratteri al bordo più esterno di una riga sono candidati — la punteggiatura interna alla riga non è interessata.

Valori

Valore	Descrizione
`none`	Nessun segno di punteggiatura sporge. Questo è il valore predefinito.
`first`	Un segno di punteggiatura di apertura all'inizio della prima riga sporge fuori dal bordo iniziale del box.
`last`	Un segno di punteggiatura di chiusura alla fine dell'ultima riga sporge fuori dal bordo finale del box.
`allow-end`	Un segno di punteggiatura di chiusura alla fine di qualsiasi riga sporge solo se non ci entrerebbe altrimenti prima che venga applicata la giustificazione.
`force-end`	Un segno di punteggiatura di chiusura alla fine di ogni riga sporge sempre, indipendentemente dal fatto che ci sarebbe entrato.
`initial`	Reimposta al valore predefinito (`none`).
`inherit`	Eredita il valore calcolato dall'elemento padre.
`unset`	Reimposta al valore ereditato se la proprietà è ereditata (il che è il caso), risultando di fatto uguale a `inherit`.

`allow-end` vs `force-end`

La distinzione tra questi due valori di sporgenza finale è sottile ma importante:

allow-end — fa sporgere la punteggiatura finale solo quando non entrerebbe nella riga prima che la giustificazione abbia effetto. In altre parole, il browser ricorre alla sporgenza solo come ultima risorsa per evitare spazi di giustificazione scomodi.
force-end — fa sempre sporgere la punteggiatura finale nel margine su ogni riga, indipendentemente dallo spazio disponibile. Questo può creare un margine ottico uniforme, ma può risultare strano su righe brevi.

Usa allow-end per il testo del corpo dove vuoi sottigliezza; usa force-end quando desideri un effetto di allineamento del margine ottico rigoroso simile ai sistemi tipografici tradizionali.

`hanging-punctuation: first`

Il valore first permette a un segno di punteggiatura di apertura sulla prima riga di sporgere fuori dal bordo iniziale (sinistro, nel testo LTR) del box contenitore. Il risultato è che il testo del corpo rimane otticamente allineato mentre il guillemetto di apertura fluttua nel margine.

<!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>

Provalo tu stesso »

Risultato

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

Il carattere " di apertura si sposta a sinistra della linea del bordo, in modo che la L di Lorem si allinei visivamente con le righe sottostanti.

`hanging-punctuation: last`

Il valore last fa sporgere un segno di punteggiatura di chiusura — come un punto, una virgola o un guillemetto di chiusura sull'ultima riga — fuori dal bordo finale (destro, nel testo LTR) del box. Questo è particolarmente utile con il testo allineato a destra o giustificato, dove un segno di punteggiatura nel margine previene un bordo ottico frastagliato.

<!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>

Il punto finale alla fine del paragrafo si sposta a destra del bordo, mantenendo il bordo destro del blocco giustificato otticamente pulito.

Combinare i valori

Puoi combinare first, last e una delle parole chiave di sporgenza finale in una singola dichiarazione. L'ordine delle parole chiave non è rilevante:

/* 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;
}

Combinare first last è uno schema tipografico comune per i blocchi di citazione: il " di apertura sporge in alto a sinistra e il " o . di chiusura sporge in basso a destra.

Consigli pratici

Abbina con text-indent per l'allineamento ottico. Se imposti un text-indent negativo su un contenitore, hanging-punctuation: first e text-indent possono entrare in conflitto. Preferisci hanging-punctuation rispetto a un rientro negativo manuale — è semanticamente corretto e degrada in modo appropriato.

Abbina con il testo giustificato. hanging-punctuation: last e force-end funzionano meglio con text-align: justify (vedi text-align). Con il testo allineato a sinistra l'effetto è di solito invisibile a meno che l'ultima riga non finisca esattamente al bordo del box.

Usalo su <blockquote> e citazioni in evidenza. Questi elementi iniziano quasi sempre con un guillemetto di apertura, rendendo hanging-punctuation: first l'applicazione più efficace e meno rischiosa.

Miglioramento progressivo — non è necessario @supports. Poiché la proprietà è ereditata e degrada a none, puoi applicarla in modo sicuro senza una query di funzionalità:

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

Proprietà correlate

Queste proprietà vengono comunemente usate insieme a hanging-punctuation per la messa a punto della tipografia:

text-align — imposta l'allineamento orizzontale; justify rende la punteggiatura finale sporgente più evidente.
text-justify — controlla come il testo giustificato distribuisce lo spazio tra parole e caratteri.
text-indent — rientra la prima riga di un blocco; può essere combinato con hanging-punctuation: first.
hyphens — controlla la sillabazione automatica; la combinazione con hanging-punctuation offre il pieno controllo tipografico sulle interruzioni di riga.
white-space — regola il modo in cui gli spazi bianchi e le interruzioni di riga nel testo vengono gestiti.

Esercizio

Pratica

Cosa fa la proprietà hanging-punctuation in CSS?

Determina se gli elementi possono sovrapporsi l'uno all'altro.Consente di posizionare un segno di punteggiatura fuori dal bordo del line box.Generalizza l'idea di inserire contenuto prima o dopo il contenuto di un elemento.Posiziona i segni di punteggiatura al centro del line box.