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:

    
    
    
    


    
Come giustificare il testo in HTML5
    

        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. 
    
    

        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.
    

Spiegazione:

• Struttura HTML:
  • IL
    il tag viene utilizzato per l'intestazione e due
    I tag vengono utilizzati per i paragrafi di testo.
• CSS:
  • IL allineamento del testo: giustificazione; lo stile viene applicato a tutti
    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.

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:

    
    
    
    


    
Come giustificare il testo in HTML5
    

        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.
    
    

        Questo paragrafo non sarà giustificato perché non ha la classe "justify-text".
    

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:

1. Leggibilità: Justified text can sometimes create uneven spacing between words, especially if the line length is short. This can affect readability. It’s important to test the justification on different devices and screen sizes to ensure a clean, readable appearance.
2. 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 trattini proprietà (anche se non tutti i browser supportano questa funzionalità).

   p { text-align: justify; hyphens: auto; /* Consente la sillabazione automatica */}
   

3. Allineamenti alternativi: Se decidi che la giustificazione non è ottimale in tutti i casi, puoi sperimentare altri allineamenti del testo, come Sinistra, Giusto, O centro, utilizzando il allineamento del testo proprietà.

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