La proprietà hanging-punctuation mira a dare ai web designer un controllo più fine sulla tipografia sul web.
L’idea alla base della punteggiatura sospesa è quella di inserire alcuni caratteri di punteggiatura dall’inizio (o in misura minore alla fine) degli elementi di testo “fuori” dalla scatola al fine di preservare il flusso di lettura.
Fondamentalmente, sposterebbe leggermente quella citazione, proiettile o qualsiasi altra cosa a sinistra (o a destra in modalità rtl) in modo che la prima lettera sia correttamente allineata con il resto del documento.
Si prega di notare che questa proprietà è opzionale in modo che i produttori di browser possono o non possono supportarlo.
Sintassi
hanging-punctuation: none | || last ]blockquote p { hanging-punctuation: first;} none
Nessun personaggio si blocca. Questo è il valore predefinito per questa proprietà.
first
Un carattere disponibile all’inizio della prima riga formattata di un elemento si blocca.
last
Un carattere disponibile alla fine dell’ultima riga formattata di un elemento si blocca.
force-end
Un arresto o una virgola alla fine di una linea si blocca.
La punteggiatura è costretta a bloccarsi e non viene considerata quando si misura la linea per la giustificazione.
allow-end
Un arresto o una virgola alla fine di una riga si blocca se non si adatta altrimenti prima della giustificazione.
La punteggiatura alla fine della prima riga per non si blocca perché si adatta senza appendere. Sulla seconda riga, tuttavia, non c’è abbastanza spazio in modo che si blocchi.
caratteri Disponibili
| Codice | Carattere | Nome |
|---|---|---|
U+002C |
, | VIRGOLA |
U+002E |
. | PUNTO E BASTA |
U+060C |
، | VIRGOLA ARABA |
U+06D4 |
۔ | ARABO PUNTO E BASTA |
U+3001 |
、 | VIRGOLA IDEOGRAFICA |
U+3002 |
。 | PUNTO IDEOGRAFICO |
U+FF0C |
， | VIRGOLA A LARGHEZZA INTERA |
U+FF0E |
． | FULLWIDTH PUNTO E BASTA |
U+FE50 |
﹐ | PICCOLA VIRGOLA |
U+FE51 |
﹑ | PICCOLA VIRGOLA IDEOGRAFICA |
U+FE52 |
﹒ | PICCOLO PUNTO |
U+FF61 |
｡ | HALFWIDTH IDEOGRAPHIC PUNTO E BASTA |
U+FF64 |
､ | VIRGOLA IDEOGRAFICA HALFWIDTH |
Si noti che gli interpreti possono aggiungere qualsiasi carattere a questo elenco. Citando le specifiche:
L’UA può includere altri caratteri a seconda dei casi.
Proprietà Correlate
text-indenttext-align
Altre Risorse
-
hanging-punctuationspec -
hanging-punctuationcon i CSS da Steve Hickey
il Supporto del Browser
Questo supporto del browser, i dati da Caniuse, che ha più di dettaglio. Un numero indica che il browser supporta la funzione a quella versione e fino.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| No | No | No | No | 10 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| No | No | No | 10.0-10.2 |
Un fallback decente per il browser non supportato sarebbe quello di utilizzare un rientro di testo negativo in questo modo:
blockquote p { text-indent: -0.5em; /* Change according to your font */}Per gli elenchi puntati, è possibile assicurarsi che la posizione dei punti elenco sia impostata su outside e che l’overflow del contenitore non sia impostato su hidden.