Uno dei problemi che i css non erano riusciti a risolvere era quello dell’incolonnamento del testo su più colonne.
Fortunatamente le ultime specifiche css3 prevedono delle istruzioni che colmano questo gap.
La premessa d’obbligo e che, come è ormai tristemente noto, i css3 hanno pieno supporto su Chrome, Safari e Mozzilla ma non su Internet Explorer, che comunque è sempre più in calo di popolarità. Quindi se volete un codice pienamente cross-browser dovrete aspettare che Microsoft si degni di recepire le specifiche dei css3.
Passando al codice, vediamo le quattro proprietà relative al testo incolonnato :
column-count: il numero di colonne del testo
column-width: la larghezza di ogni colonna
column-gap: lo spazio tra una colonna e l’altra
column-rule: specifica un bordo tra le colonne come divisore
Ora mettiamolo in pratica:
In questo primo esempio scegliamo di mettere il testo su 3 colonne e automaticamente ne verrà calcolata la larghezza
Il Codice:
#3colonnegiustificate
{
-moz-column-count: 3;
-webkit-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
text-align: justify;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ante nunc, sit amet imperdiet eros. Mauris lobortis risus a velit pulvinar interdum. Cras felis turpis, ultricies a dapibus et, dignissim eu lorem. Nullam non leo mi. Ut id tincidunt erat. Sed vitae justo ultricies sem gravida commodo. Cras pharetra euismod tincidunt. Ut mauris neque, suscipit vel gravida et, elementum eu magna. Praesent sapien massa, ornare ac aliquet a, eleifend ut enim. Aenean lacinia sollicitudin urna sit amet eleifend. Phasellus vitae quam augue, in aliquam sapien. Vestibulum eget sem sed lacus porttitor ullamcorper. In justo velit, sollicitudin et ornare pharetra, ultricies a nisl. Vivamus id cursus lectus. Maecenas sit amet aliquam lectus. Curabitur non fermentum purus. Donec consectetur velit aliquam nunc facilisis gravida. Pellentesque fermentum diam vitae velit rhoncus dignissim ut a nunc. Pellentesque dictum ligula non turpis facilisis tincidunt dignissim sapien pulvinar. Vestibulum lobortis cursus libero sit amet hendrerit. Mauris interdum vestibulum tortor, non hendrerit sem posuere nec.
In questo secondo esempio invece facciamo il contrario e gli diciamo quanto devono essere larghe le colonne.
Codice:
#colonnelarghe350
{
-moz-column-width: 350px;
-webkit-column-width: 350px;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
text-align: justify;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a ante nunc, sit amet imperdiet eros. Mauris lobortis risus a velit pulvinar interdum. Cras felis turpis, ultricies a dapibus et, dignissim eu lorem. Nullam non leo mi. Ut id tincidunt erat. Sed vitae justo ultricies sem gravida commodo. Cras pharetra euismod tincidunt. Ut mauris neque, suscipit vel gravida et, elementum eu magna. Praesent sapien massa, ornare ac aliquet a, eleifend ut enim. Aenean lacinia sollicitudin urna sit amet eleifend. Phasellus vitae quam augue, in aliquam sapien. Vestibulum eget sem sed lacus porttitor ullamcorper. In justo velit, sollicitudin et ornare pharetra, ultricies a nisl. Vivamus id cursus lectus. Maecenas sit amet aliquam lectus. Curabitur non fermentum purus. Donec consectetur velit aliquam nunc facilisis gravida. Pellentesque fermentum diam vitae velit rhoncus dignissim ut a nunc. Pellentesque dictum ligula non turpis facilisis tincidunt dignissim sapien pulvinar. Vestibulum lobortis cursus libero sit amet hendrerit. Mauris interdum vestibulum tortor, non hendrerit sem posuere nec.
Con queste poche righe di css possiamo risolvere un problema che fino a questo momento era irrisolvibile se non con numerosi div fluttuanti!
Buona programmazione a tutti!