CSS hanging-punctuation
La proprietà CSS3 hanging-punctuation controlla la sospensione della punteggiatura
La proprietà hanging-punctuation migliora l'allineamento ottico del testo permettendo alla punteggiatura (come virgolette o punti) di fuoriuscire dai margini del paragrafo. È particolarmente utile in layout tipografici raffinati e testi giustificati.
Supporto browser (limitato) Supporto molto limitato o sperimentale.
Sintassi
Significato dei valori principali:
none: valore predefinito. Nessuna punteggiatura è sospesa.
first: consente alla punteggiatura iniziale di sporgere fuori dal margine sinistro (o destro nei layout RTL).
last: consente alla punteggiatura finale di sporgere oltre il margine del blocco.
allow-end: permette la sospensione condizionale della punteggiatura alla fine delle righe.
force-end: forza la punteggiatura finale a essere sempre sospesa.
Esempio proprietà: hanging-punctuation
Codice Esempio: hanging-punctuation
.hanging-none {
hanging-punctuation: none;
text-align: justify;
font-size: 20px;
max-width: 400px;
border-left: 3px solid #ccc;
padding-left: 15px;
}.hanging-first {
hanging-punctuation: first;
text-align: justify;
font-size: 20px;
max-width: 400px;
border-left: 3px solid #ccc;
padding-left: 15px;
}
Contenuto Esempio: hanging-punctuation
Esempio di utilizzo di hanging-punctuation
Questo esempio mostra l'effetto della punteggiatura sospesa all'inizio delle righe di un blocco di testo:
hanging-punctuation: first.
CSS e HTML per l'esempio con hanging-punctuation:
<style>
.hanging-none {
hanging-punctuation: none;
text-align: justify;
font-size: 20px;
max-width: 400px;
border-left: 3px solid #ccc;
padding-left: 15px;
}
.hanging-first {
hanging-punctuation: first;
text-align: justify;
font-size: 20px;
max-width: 400px;
border-left: 3px solid #ccc;
padding-left: 15px;
}
</style>
<div class="hanging-none">
“La punteggiatura è allineata con il testo” – nessuna sospensione.
</div>
<div class="hanging-first">
“La punteggiatura sporge oltre il margine” – grazie a hanging-punctuation: first.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
