Giustificare il testo è un'attività comune nel web design, poiché aiuta a creare un layout ordinato e professionale allineando il testo uniformemente lungo i margini sinistro e destro. In HTML5, la giustificazione del testo viene in genere gestita tramite CSS (Cascading Style Sheets) anziché direttamente all'interno dei tag HTML.
Perché giustificare il testo?
Giustificare il testo crea un blocco di testo uniforme che si allinea sia al bordo sinistro che a quello destro di un contenitore, proprio come il testo di un giornale o di un libro. Questo metodo viene spesso utilizzato per migliorare l'estetica dei paragrafi, rendendo il testo più ordinato e ordinato.
Come giustificare il testo usando CSS in HTML5
È possibile giustificare il testo in HTML5 utilizzando allineamento del testo proprietà in CSS. La allineamento del testo La proprietà controlla l'allineamento orizzontale del testo all'interno di un contenitore. Per giustificare il testo, è sufficiente utilizzare il valore giustificare.
Ecco come fare:
Esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di giustificazione del testo</title>
<style>
/* CSS to justify the text */ p {
text-align: justify;
}
</style>
</head>
<body>
<h1>Come giustificare il testo in HTML5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nulla facile. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui. Nunc sit amet magna nisi. Intero auctor nec metus eget vulputate. Suspendisse vitae urna eget augue volutpat iaculis non sit amet mi.
</p>
<p>
Aenean tincidunt, arcu nec tincidunt aliquet, nisl risus maximus nunc, sed bibendum risus velit a augue. Curabitur suscipit, lectus id efficitur mollis, metus lectus tincidunt ligula, id luctus magna risus et sapien. Nulla facile. Proin elementum sit amet purus a fermentum. Ut et velit a mi volutpat auctor.
</p>
</body>
</html>
Spiegazione:
- Struttura HTML:
- IL
<h1>il tag viene utilizzato per l'intestazione e due<p>I tag vengono utilizzati per i paragrafi di testo.
- IL
- CSS:
- IL
allineamento del testo: giustificazione;lo stile viene applicato a tutti<p>elementi. Questo garantisce che il testo all'interno di questi tag di paragrafo sarà giustificato, ovvero si allungherà per allinearsi sia al margine sinistro che a quello destro.
- IL
Alternativa: giustificazione del testo per elementi specifici
Se non si desidera applicare la giustificazione a tutti i paragrafi, ma solo ad alcuni specifici, è possibile utilizzare una classe o un ID per selezionare elementi specifici.
Esempio utilizzando una classe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di giustificazione del testo</title>
<style>
/* CSS to justify only paragraphs with the class 'justify-text' */ .justify-text {
text-align: justify;
}
</style>
</head>
<body>
<h1>Come giustificare il testo in HTML5</h1>
<p class="justify-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis felis velit. Nulla facile. Integer convallis, orci a egestas sodales, orci lorem lacinia lorem, eget pretium eros lorem eu erat. Quisque euismod, lorem sit amet tempor feugiat, mauris erat dictum arcu, sed suscipit justo nulla a dui.
</p>
<p>
Questo paragrafo non sarà giustificato perché non ha la classe "justify-text".
</p>
</body>
</html>
In questo esempio, solo il paragrafo con la classe giustificare il testo è giustificato e il secondo paragrafo rimane allineato a sinistra.
Cose da tenere a mente:
- Leggibilità: Il testo giustificato a volte può creare una spaziatura irregolare tra le parole, soprattutto se la lunghezza della riga è breve. Questo può influire sulla leggibilità. È importante testare la giustificazione su dispositivi e dimensioni dello schermo diversi per garantire un aspetto pulito e leggibile.
- sillabazione: Il testo giustificato può anche portare a spiacevoli interruzioni di parola. Per migliorare l'aspetto del testo, puoi abilitare la sillabazione in CSS utilizzando
trattiniproprietà (anche se non tutti i browser supportano questa funzionalità).p { text-align: justify; hyphens: auto; /* Consente la sillabazione automatica */} - Allineamenti alternativi: Se decidi che la giustificazione non è ottimale in tutti i casi, puoi sperimentare altri allineamenti del testo, come
Sinistra,Giusto, Ocentro, utilizzando ilallineamento del testoproprietà.
Conclusione
Giustificare il testo in HTML5 è semplice da ottenere utilizzando CSS con allineamento del testo: giustificazione; Proprietà. Aiuta a creare blocchi di testo puliti e dall'aspetto professionale, comunemente presenti in libri, giornali e siti web. Che si desideri giustificare il testo su tutta la pagina o solo per elementi specifici, i CSS offrono un modo semplice per implementare questa funzionalità e personalizzarla in base alle proprie esigenze.
Foto di Luca
