Come impostare il testo giustificato con CSS

click fraud protection

Una delle proprietà della tipografia di un sito Web che puoi scegliere di modificare durante lo sviluppo di un sito è il modo in cui il testo del sito è giustificato. Per impostazione predefinita, il testo del sito Web è giustificato a sinistra e questo è il numero di siti che lasciano il testo. Le uniche altre opzioni sono giustificate a destra, il che è raro o pienamente giustificato.

Testo giustificato è un blocco di testo che si allinea su entrambi i lati sinistro e destro, al contrario di uno solo di quei lati (che è ciò che fanno la giustificazione "sinistra" e "destra"). L'effetto doppiamente giustificato si ottiene regolando gli spazi di parole e lettere in ogni riga di testo per garantire che ogni riga abbia la stessa lunghezza. Questo effetto si chiama piena giustificazione. Giustifica il testo in CSS usando il allineare il testo proprietà.

Come funziona la giustificazione?

Il motivo per cui spesso vedi un bordo irregolare sul lato destro di un blocco di testo è che ogni riga di testo non ha la stessa lunghezza. Alcune righe hanno più parole o parole più lunghe mentre altre hanno parole meno o più brevi. Per giustificare quel blocco di testo, è necessario aggiungere spazi extra ad alcune righe per uniformare tutte le righe e renderle coerenti.

instagram viewer

Ogni browser web ha il proprio algoritmo per applicare gli spazi extra all'interno di una riga. I browser esaminano la lunghezza delle parole, la sillabazione e altri fattori per determinare dove inserire gli spazi. Di conseguenza, il testo giustificato potrebbe non apparire identico da un browser all'altro. Siate certi, tuttavia, che il supporto del browser principale è utile per giustificare il testo con i CSS.

Come giustificare il testo

La giustificazione del testo con CSS richiede una sezione di testo da giustificare. In genere, utilizzerai paragrafi di testo perché grandi blocchi di contesto di testo che si estendono su più righe verranno contrassegnati con tag di paragrafo.

Dopo aver giustificato un blocco di testo, è solo questione di impostare lo stile su giustificato con la proprietà di stile CSS text-align. Applicare questa regola CSS a un selettore appropriato per ottenere il rendering del blocco di testo come previsto.

Quando giustificare il testo?

A molte persone piace l'aspetto del testo giustificato dal punto di vista del design, soprattutto perché crea un aspetto molto coerente e misurato, ma ci sono degli svantaggi nel giustificare completamente il testo su una pagina web.

Innanzitutto, il testo giustificato può essere difficile da leggere. Questo perché quando giustifichi il testo, a volte può essere aggiunto molto spazio extra tra alcune parole sulla riga. Queste lacune incoerenti possono rendere il testo più difficile da leggere. Ciò è particolarmente importante per le pagine Web, che possono essere già difficili da leggere a causa dell'illuminazione, della risoluzione o di altra qualità dell'hardware. L'aggiunta di spazi insoliti al testo può peggiorare ulteriormente la situazione.

Oltre alle difficoltà di leggibilità, gli spazi vuoti a volte si allineano l'uno con l'altro per creare "fiumi" di spazio bianco nel mezzo del testo. Quegli ampi spazi vuoti possono davvero creare un display imbarazzante. Inoltre, su righe estremamente corte, la giustificazione può causare righe che contengono una parola con spazi extra tra le lettere stesse.

Quindi, quando dovresti usare la giustificazione del testo? Il momento migliore per giustificare il testo si verifica quando le righe sono lunghe e la dimensione del carattere è piccola, cosa difficile da garantire su siti Web reattivi in ​​cui le lunghezze delle righe cambiano in base alle dimensioni dello schermo. Non esiste un numero fisso e veloce per la lunghezza della riga o la dimensione del testo; devi usare il tuo miglior giudizio.

Dopo aver applicato lo stile di allineamento del testo per giustificare il testo, provalo per assicurarti che il testo non contenga fiumi di spazi bianchi e provalo in una varietà di dimensioni. Il test più semplice non richiede niente di più complicato dei tuoi stessi occhi socchiusi. I fiumi risaltano come macchie di bianco in un blocco di testo altrimenti grigio. Se vedi fiumi, dovresti apportare modifiche alla dimensione del testo o alla larghezza del blocco di testo per ridisporre il testo.

Usa la giustificazione solo dopo averla confrontata con il testo allineato a sinistra. Potrebbe piacerti la coerenza della giustificazione completa, ma il testo standard giustificato a sinistra è solitamente più leggibile. Alla fine, dovresti giustificare il testo perché hai scelto di giustificare il testo per motivi di progettazione e hai confermato che il tuo sito rimane facile da leggere.

instagram story viewer