Mondi su mondi, sistemi di sistemi.

Ritmo verticale

Questo articolo su Opera Dev mi dato lo stimolo per scrivere qualche appunto un po’ più completo sulle griglie per la baseline del testo (uso i termini in inglese quando non conosco i corrispondenti corretti in italiano), in particolare quando usiamo un framework per i CSS come YUI.

La prime cose da decidere sono la font-size e line-height; con YUI, i valori sono: font-size: 13px e line-height: 1.231em (ovvero, 16px). In altri articoli ho visto applicare un valore del 150%; con YUI avremmo 19.5px, che pos­siamo ottenere, appros­simando, con 146.5% (19px) o 153.9% (20px), ma per questo articolo usiamo il default.

L’idea di base è che una volta scelto, questo valore sarà la nostra unità di base per calcolare padding, margin e line-height, in modo che l’altezza comples­siva di un elemento sia sempre un suo multiplo di tale unità.

Paragrafi e altri block elements

Per elementi come p basta compensare il valore di 1em assegnato di default dai browser ai margini:

p {
  margin-top: 16px;
  margin-bottom: 16px;
}

Liste

Per le liste dobbiamo decidere, eventualmente caso per caso, se specificare il trattamento per ogni singola riga, e quindi ricadere negli esempi visti prima, o considerare la lista come blocco unico; in questo caso basterà specificare margin-bottom.

Immagini e callouts

Per gli altri elementi, dobbiamo decidere in base alla pos­sibilità o meno di sapere in anti­cipo l’ingombro verticale: di un’immagine pos­siamo stabilire che dovrà essere alta, ad esempio, 80px (ovvero, un multiplo di 16) e quindi essere certi che non romperà il ritmo verticale; per gli elementi variabili come blocchi di testo in callout, se gli elementi all’interno rispettano già la misura standard, dobbiamo solo accertarci che la somma di margin, padding e border siano anch’essa un multiplo:

.callout {
  border: 1px solid #ddd;
  padding: 7px 10px;
  margin-bottom: 16px;
}

Infatti: border top + padding top + padding bottom + border bottom = 16px.

Nel caso delle immagini, se vogliamo anche calcolare la pos­sibilità che l’utente possa ridimensionare il testo, pos­siamo specificare le dimensioni dell’immagine in em, in questo caso, 5em.

Quindi, quando le dimensioni del testo non variano basta lavorare sui para­metri del box model: margin, border e padding.

Variazioni su line-height

Invece, tutte le volte che cambiamo font-size si pone il problema di cosa fare con il valore di line-height. Su OperaDev quest’ultimo non viene nemmeno variato e si lavora solo sul box model; nell’articolo di A List Apart, consigliano di usare semplicemente dei multipli del valore di base per i titoli ma non dicono nulla sulla pos­sibilità di avere dei callout in cui la dimensioni del testo è minore di quel valore; in 24 Ways, il valore di line-height per i titoli viene ottenuto dividendo il valore di base per font-size e applicando lo stesso metodo anche ai callout in modo da ottenere sempre una griglia omogenea — tuttavia non dicono nulla sul problema di una line-height troppo piccola quando i titoli scorrono su più righe; infine, Mark Boulton propone un miglioramento per i callout ma purtroppo non dice nulla sui titoli.

Che fare? Questi sono i valori che ho usato per il file di esempio di griglia per ritmo verticale:

h1 {
    font-size: 24px;
    line-height: 0.6667em;
    margin-bottom: 0.6667em;
    margin-top: 1.3334em;
}
h2 {
    font-size: 19px;
    line-height: 1.2631em;
    margin-bottom: 0.8421em;
    margin-top: 0.8421em;
}
h3 {
    font-size: 18px;
    line-height: 0.8889em;
    margin-bottom: 0.8889em;
    margin-top: 0.7778em;
}

In pratica ho usato la divisione, tranne che per l’h2, dove, a causa del testo che scorre su più righe, il valore di line-height era troppo basso e quindi l’ho moltiplicato per 1,5, ottenendo un box di 48px.

Considerazioni simili pos­sono essere fatte per blocchi di testo con un valore di font-size inferiore a quello base, come nei callout: pos­siamo fare in modo che ogni riga stia nella griglia standard o fare in modo che sia proporzionale alle dimensioni del testo nel callout.

Nel primo caso line-height viene incrementato tramite la formula: line-height standard / dimensione testo callout. Nel secondo caso dobbiamo prima decidere il rapporto, fra numero di righe del testo principale e quello del callout e poi fare qualche calcolo. Se vogliamo che ogni quattro righe di testo “standard” ci siano cinque righe di callout, allora il valore di line-height sarà: line-height standard * 4 / 5, ovvero, 12.8 px. Tuttavia va ricordato che dovremo anche aggiustare (a occhio) il valore di margin-top.

Strumenti utili

Se consideriamo ogni caso singolarmente, gli accorgimenti descritti non sono difficili da seguire ma quando lavoriamo su una pagina nel suo insieme può venire utile qualche strumento.

Per FireFox, oltre ai clas­sici come Firebug e Web Developer, ho trovato utile Gridfox.

Altri post sull’argomento

Scritto il 26/09/08 da giorgio_v.
Tags: .