Come suddividere il testo di un articolo in 2, 3 o 4 colonne.

Come mostrare un testo incolonnato e giustificato in un articolo o in una pagina web utilizzando il CSS.

La presentazione di un testo di un articolo divisa in colonne era una esigenza assoluta fino a qualche decennio fa. Il formato dei giornali era infatti del tipo lenzuolo e per facilitare la lettura gli articoli dovevano essere necessariamente suddivisi in colonne. Anche il layout della prima pagina con molte colonne permetteva l'inserimento di più titoli. Con l'avvento dei tabloid le colonne sono diminuite di numero ma sono rimaste e solo con i quotidiani online questa grafica non sembra più così essenziale.

Un'altra particolarità dei quotidiani è quella della giustificazione del testo. Si tratta di mostrare le varie colonne di testo allineate a destra oltre che a sinistra. Si può introdurre la giustificazione usando l'apposita icona nell'Editor oppure con i CSS utilizzando il tag text-align:justify;. Consiglio di utilizzare la giustificazione anche nei blog meno curati perché questa scelta grafica dà una impressione di professionalità a tutto il sito.

In questo post vedremo come pubblicare articoli suddivisi in colonne e con testo giustificato.

COME PUBBLICARE UN ARTICOLO SU DUE COLONNE

Per pubblicare un post su due colonne su Blogger dovremo aprire l'Editor e andare in Modalità HTML quindi utilizzare una struttura di codice come questa

<div style="float: left; text-align: justify; width: 47%;">
Testo o codice della prima colonna</div>
<div style="float: right; text-align: justify; width: 47%;">
Testo o codice della seconda colonna
</div>
<div style="clear: both;">
</div>

a cui si deve aggiungere il testo delle due colonne anche formattato e pure con l'aggiunta di immagini. Ho usato una percentuale del 47% per lasciare uno spazio tra le due colonne. Si può variare questa percentuale per avvicinare o allontanare le colonne. Il risultato sarà simile a questo

COME PUBBLICARE UN ARTICOLO SU TRE COLONNE

Il codice da usare quando si vuole pubblicare un articolo su tre colonne invece è questo

<style type="text/css">
#col1 {
width: 260px;
float: left;
text-align:justify;
}
#col2 {
width: 600px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<div id="col1">
Testo o codice della prima colonna
</div>
<div id="col2">
<div style="float: left; width: 47%;">
Testo o codice della seconda colonna
</div>
<div style="float: right; width: 47%;">
Testo o codice della terza colonna
</div>
<div style="clear: both;">
</div>
</div>

Dove ci sono due divisioni. La prima ci permette di dividere il post in una colonna di 260 pixel e una di 600 pixel. La seconda colonna poi viene suddivisa in due parti utilizzando il codice precedente. L'utilizzo di un codice come questo porta al seguente risultato

Naturalmente le larghezze sono puramente indicative e possono essere adattate al layout della pagina.

COME PUBBLICARE UN ARTICOLO DIVISO IN 4 COLONNE

In linea di massima credo che tre colonne sia la suddivisione massima per un articolo online. Se volessimo optare per quattro colonne potremmo comunque usare questo codice

<style type="text/css">
#col11 {
width: 430px;
float: left;
text-align:justify;
}
#col21 {
width: 430px;
float: right;
text-align:justify;
margin: 0;
padding: 0;
}
</style>
<<div id="col11">
<div style="float: left; width: 47%;">
Testo o codice della prima colonna
</div>
<div style="float: right; width: 47%;">
Testo o codice della seconda colonna
</div>
<div style="clear: both;">
</div>
</div>
<div id="col21">
<div style="float: left; width: 47%;">
Testo o codice della terza colonna
</div>
<div style="float: right; width: 47%;">
Testo o codice della quarta colonna
</div>
<div style="clear: both;">
</div>
</div>

che porta a questo risultato



Come in precedenza le percentuali e le misure possono essere modificate. Per rendere il layout del sito ancora più simile a quello di un quotidiano si possono aggiungere al titolo occhiello e cappello.

Da leggere: Come aggiungere Occhiello e Cappello al Titolo di un Post