La hanging-punctuationproprietà mira a dare ai web designer un controllo più dettagliato 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” dal riquadro al fine di preservare il flusso di lettura.
Fondamentalmente, sposterebbe leggermente quella citazione, punto elenco o qualsiasi altra cosa a sinistra (oa destra in rtlmodalità) in modo che la prima lettera sia correttamente allineata con il resto del documento.
Si prega di notare che questa proprietà è facoltativa, quindi i produttori di browser possono supportarla o meno.
Sintassi
hanging-punctuation: none | ( first || ( force-end | allow-end ) || 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 punto o una virgola alla fine di una riga si blocca.
La punteggiatura viene forzata e non viene presa in considerazione quando si misura la linea per la giustificazione.
allow-end
Un punto 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, quindi si blocca.
Caratteri disponibili
| Codice | Personaggio | Nome |
|---|---|---|
U+002C | , | VIRGOLA |
U+002E | . | PUNTO |
U+060C | ، | Virgola araba |
U+06D4 | ۔ | ARABO FULL STOP |
U+3001 | 、 | COMMA IDEOGRAFICO |
U+3002 | 。 | FERMATA COMPLETA IDEOGRAFICA |
U+FF0C | ， | COMMA A LARGHEZZA INTERA |
U+FF0E | ． | FULL LARGHEZZA FULL STOP |
U+FE50 | ﹐ | PICCOLA COMMA |
U+FE51 | ﹑ | PICCOLA VIRGOLA IDEOGRAFICA |
U+FE52 | ﹒ | PICCOLO FULL STOP |
U+FF61 | ｡ | MEZZA LARGHEZZA IDEOGRAFICA FULL STOP |
U+FF64 | ､ | MEZZA LARGHEZZA IDEOGRAFICA COMMA |
Notare che gli interpreti possono aggiungere qualsiasi carattere a questo elenco. Citando le specifiche:
L'UA può includere altri caratteri a seconda dei casi.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| No | No | No | No | 10 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| No | No | No | 10.0-10.2 |
Un buon fallback per un 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, potresti voler assicurarti che la posizione dei punti elenco sia impostata su outsidee che l'overflow del contenitore non sia impostato su hidden.