Proprietà CSS text-justify
Usa la proprietà CSS text-justify per specificare la spaziatura tra parole o caratteri nel testo giustificato. Valori ed esempi.
La proprietà CSS text-justify controlla come il browser distribuisce lo spazio extra quando il testo giustificato viene esteso per riempire ogni riga. Ha effetto solo quando text-align è impostato su justify — da sola non fa nulla.
Questa pagina spiega cosa fa text-justify, ciascuno dei suoi valori, quando usarla, le problematiche legate al supporto dei browser che è necessario conoscere e come si relaziona con le altre proprietà di spaziatura.
Il problema che risolve
Quando si imposta text-align: justify, il browser aggiunge spaziatura a ogni riga in modo che i bordi sinistro e destro siano allineati, come in una colonna di giornale. Esistono due modi per aggiungere questa spaziatura: allargare gli spazi tra le parole, oppure allargare gli spazi tra i caratteri. text-justify consente di scegliere quale strategia utilizzare, anziché affidarsi all'algoritmo predefinito del browser.
Questo è importante perché la strategia corretta dipende dalla lingua. Le lingue con spazi tra le parole (inglese, tedesco, francese) di solito hanno un aspetto migliore con una spaziatura extra tra le parole. Le lingue scritte senza spazi tra le parole (come cinese, giapponese e coreano) hanno spazio per estendersi solo tra i caratteri, quindi inter-character è la scelta naturale in questi casi.
text-justify è una delle proprietà CSS3.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi block-level. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.textJustify = "inter-character"; |
Sintassi
text-justify: auto | inter-word | inter-character | none | initial | inherit;Poiché text-justify è inerte senza testo giustificato, le due proprietà vengono quasi sempre impostate insieme:
p {
text-align: justify; /* turn justification on */
text-justify: inter-word; /* choose how the gaps grow */
}Esempio della proprietà text-justify:
Esempio di codice CSS text-justify
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
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 when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Risultato
Con inter-word gli spazi tra le parole si allargano finché ogni riga non raggiunge il bordo del contenitore. Riducendo la larghezza del browser si vedrà che gli spazi si estendono maggiormente nelle righe che sono lontane dal riempire la larghezza.
Esempio della proprietà text-justify con il valore "inter-character":
Esempio CSS text-justify con il valore inter-character
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
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 when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Con inter-character, lo spazio extra viene inserito tra i singoli caratteri anziché solo tra le parole. Sul testo latino l'effetto è sottile; diventa essenziale per gli script CJK dove non esistono spazi tra le parole da allargare.
Supporto dei browser e problematiche
text-justify ha un supporto non uniforme e alcuni aspetti critici da conoscere prima di affidarsi a questa proprietà:
inter-characterè il valore extra più affidabile, ma la parola chiavedistribute, un tempo comune, è stata rinominata ininter-charactere il vecchio nome è deprecato.nonenon viene rispettato ovunque. Alcuni motori continuano a giustificare l'ultima riga o tornano all'algoritmo predefinito, quindi è meglio testare invece di dare per scontato che la giustificazione sia completamente disattivata.- Il testo giustificato può creare "fiumi" — canali irregolari di spazio bianco che scorrono lungo un paragrafo — specialmente nelle colonne strette. Abbinare la giustificazione a
hyphens: autoe a una misura sensata (lunghezza della riga) li riduce. - L'ultima riga di un blocco giustificato non viene mai estesa; rimane allineata a sinistra (o segue
text-align-last).
In caso di dubbio, impostare text-justify: auto (o lasciare il valore non definito) e lasciare che il browser scelga la strategia migliore per la lingua del contenuto.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
auto | L'algoritmo di giustificazione è definito. Il browser può determinare se inter-word o inter-character è più adatto per la giustificazione. Questo è il valore predefinito della proprietà. | Prova » |
inter-word | Il browser aumenta lo spazio tra le parole. Tipico per le lingue con confini di parola chiari. | Prova » |
inter-character | Il browser aumenta lo spazio tra i caratteri durante la giustificazione. | Prova » |
none | La giustificazione è disattivata. | Prova » |
initial | Imposta la proprietà al suo valore predefinito. | Prova » |
inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
text-align— la proprietà che deve esserejustifyaffinchétext-justifyabbia effetto.text-align-last— controlla l'allineamento dell'ultima riga di un blocco giustificato.word-spacing— imposta direttamente lo spazio tra le parole, indipendentemente dalla giustificazione.letter-spacing— imposta direttamente lo spazio tra i caratteri (tracking).