All’uscita dell’iPad ho pensato di scrivere qualche idea sull’utilizzo del dispositivo in azienda e per lavoro, ma una delle grandi caratteristiche di questo supporto è legato alla possibilità di fruire in maniera multimediale di contenuti che qualche anno fa avremmo visto solo in edicola: i giornali.
Indubbiamente il grande vantaggio dei quotidiani è legato alla struttura che utilizzano per la lettura, permettendo un’ottimo rapporto tra fruibilità della stessa e impaginazione; sul web questo aspetto è stato sempre affrontato in maniera ovviamente diversa, un pò per la mancanza dei supporti, un pò per assenza delle tecnologie disponibili.
Oggi con l’affacciarsi dei CSS3 si possono ripensare molti di questi aspetti, quindi ho buttato giù una piccola guida riassuntiva di quello che offrono a riguardo dei layout multi-colonna.
Per prima cosa qualche informazione; visitiamo le specifiche W3C sulle nuove caratteristiche, e prendiamo in considerazione che oggi i browser che supportano tale comportamento sono Safari, Chrome (WebKit) e Firefox, mentre Internet Explorer 9 sembra ancora non in grado di gestire questo aspetto.
L’elemento multi-colonna
Le specifiche W3C introducono una serie di nuove e interessanti proprietà che ci permettono di definire le eventuali colonne di un layout HTML; quindi l’impaginazione si può impostare proprio come un vero quotidiano, definendo la larghezza delle colonne, il numero stesso delle colonne, gli spazi tra una e l’altra e anche le regole sull’overflow.
In pratica l’elemento multi-colonna per gestire correttamente gli spazi deve avere una larghezza definita e un numero di colonne; i browser rendono questi elementi simili a delle tabelle, con la differenza che il contenuto e il layout della colonna è automaticamente diviso in blocchi.
Il numero e la grandezza delle colonne
Il modo più semplice per definire il numero e la grandezze delle colonne è quello di utilizzare le proprietà column-count e column-width
column-count e column-width
L’impostazione di default di column-count é auto; questo significa che se non viene definito il column-width il browser interpreterà e creerà da se il numero di colonne necessarie per disporre tutto il testo o contenuto. Ovviamente questa scelta non sempre è consigliabile, quindi bisogna sempre decidere le dimensioni delle colonne che vogliamo adoperare.
[code lang=”css”]
#elementoMulticolonna {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
[/code]
Esempio 1 – Column-count
Come ho già detto, possiamo definire column-width senza necessariamente definire il numero delle colonne (column-count) e il browser provvederà a fare il resto; ovviamente per definire le grandezze delle colonne possiamo utilizzare tutte le unità di misura che conosciamo e già utilizziamo per i CSS, come pixel, % ed em.
[code lang=”css”]
#elementoMulticolonna {
-webkit-column-width: 15em;
-moz-column-count: 15em;
column-count: 15em;
}
[/code]
Va da sé che column-width e column-count si possono integrare ed utilizzare l’uno con l’altro 🙂
[code lang=”css”]
#elementoMulticolonna {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 15em;
-moz-column-width: 15em;
column-width: 15em;
}
[/code]
Esempio 3 – Column-count e column-width
column-gap e column-rule
La proprietà column-gap è stato introdotto dal W3C come un analogo padding tra le colonne; ovviamente risponde alle unità di misura standard e di default ha un valore di 1em tra una colonna e l’altra.
[code lang=”css”]
#elementoMulticolonna {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
[/code]
La proprietà column-rule è l’evoluzione di uno dei concetti della stampa, cioè l’utilizzo di piccole linee di separazione tra colonne, magari per separare articoli differenti ed aiutare in fatto di leggibilità.
I CSS3 ci propongono tre differenti proprietà per la regola column-rule: column-rule-size, column-rule-style e column-rule-color. Ma ovviamente possiamo utilizzare una scrittura compressa del CSS e scriverne solamente una.
[code lang=”css”]
#elementoMulticolonna {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
-webkit-column-rule: 1px solid #000;
-moz-column-rule: 1px solid #000;
column-rule: 1px solid #000;
}
[/code]
Interruzioni delle colonne
Se volessi interrompere la colonna prima di un tag h3 oppure di un span, come posso fare?
I CSS3 ci offre una soluzione anche a questo, con la proprietà column-break, la quale offre tutta una serie di interessanti funzionalità: auto, always (sempre), avoid (mai), left, right, page, column, avoid-page e avoid-column.
Quindi se volete un’interruzione della colonna prima di un elemento h3, dovete semplicemente abbinare al tag di riferimento la proprietà column-break-before e scegliere magari always.
[code lang=”css”]
h3 {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}
[/code]
Esempio 6 – Column-break-before:always;
Se invece volessimo un elemento che riesca a sovrastare su più colonne, come per esempio un titolo, possiamo utilizzare la proprietà column-span; questa proprietà ha due valori, all oppure l’utilizzo di numeri interi (es. 1,2,3,ect…).
Con all ovviamente l’interruzione si propagherà su tutte le colonne dell’elemento a cui è stato assegnato lo span, mentre con il numero si blocca al numero delle colonne.
[code lang=”css”]
h2 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}
h3 {
-webkit-column-span:2;
-moz-column-span:2;
column-span:2;
}
[/code]
Riempimento delle colonne
Abbiamo accennato prima di alcuni design d’impaginazione che richiamano concetti di stampa; i CSS3 introducono la possibilità di decidere come le colonne siano riempite dai contenuti, infatti utilizzando la proprietà column-fill possiamo definire un contenuto di tipo auto oppure balanced.
[code lang=”css”]
#elementoMulticolonna {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
-webkit-column-rule: 1px solid #000;
-moz-column-rule: 1px solid #000;
column-rule: 1px solid #000;
-webkit-column-fill:auto;
-moz-column-fill:auto;
column-fill:auto;
}
[/code]
Il primo riempirà in sequenza le colonne con il contenuto del testo, mentre il secondo distribuirà uniformemente il contenuto su tutte le colonne.
