I layout che stiamo per trattare sono di una complessità maggiore rispetto
a quelli visti in precedenza. È importante allora fissare alcuni dettagli
sull'uso dei font, dei margini e dei padding degli elementi di una pagina.
È buona norma dare all'utente la possibilità di ridimensionare il testo
di una pagina web. Mentre Opera, Mozilla e Safari consentono di personalizzare
la dimensione dei caratteri per qualsiasi pagina a prescindere dall'unità
di misura scelta per il dimensionamento dei caratteri, Internet Explorer non lo
consente per caratteri dimensionati in pixels. Usare quindi una misura relativa
è una scelta più attenta verso l'utente. Una scelta che però comporta alcune questioni
in fase di progettazione.
Il dimensionamento in em accordato con il dimensionamento relativo dei font
consente, come abbiamo visto, un ingrandimento non solo del testo, ma anche della
sezione che lo contentiene. Bisogna tener presente in questo caso che un em equivale
all'incirca alla larghezza di una lettera con un font non proporzionale (detto
comunemente monospaced).
Però, scegliere di dimensionare le colonne in pixel e usare al contempo
un carattere dimensionato relativamente, comporta test aggiuntivi, quali ad esempio
la visualizzazione della pagina modificando la dimensione del font attraverso
le opzioni del browser, per verificare che questa renda comunque bene.
Per quanto riguarda margini e padding orizzontali di un elemento, questi dovrebbero
essere concordi con l'unità di misura della sua dimensione orizzontale: se per
esempio abbiamo dimensionato le colonne laterali in pixel, margini e padding dovrebbero
essere espressi in pixel.
Infine, due parole sul padding: come visto nell'introduzione e nel mio articolo "Capire il box model", Internet Explorer 5.x (e Internet Explorer 6 senza un corretto doctype) interpretano erroneamente il padding come parte della dimensione effettiva
di un elemento. Finora negli esempi ho sempre cercato di evitare di dimensionare
un elemento e specificarne il padding, attribuendo invece dei margini agli elementi
in esso contenuti, ma arrivati a questo punto è bene adottare una soluzione che
sia più agevole: replicare margini orizzontali per tutti gli elementi contenuti
in una colonna decisamente non è una soluzione comoda o snella. È importante,
quindi, avvalersi di una tecnica che aggiri queste differenze di interpretazione,
e in tal caso il modo più semplice è senz'altro il box model hack semplificato.