I CSS sono uno straordinario strumento di supporto al lavoro del web designer a livello di produttività (facilità di gestione del sito) e perché rendono finalmente possibile un pieno controllo del layout delle pagine. Questa è la teoria o, se si vuole, il sogno nascosto di molti web designer.
La realtà è purtroppo più spesso fatta di difficoltà insormontabili e dalla ricerca di compromessi necessari. Il motivo è presto spiegato: non tutti i browser supportano i CSS e quelli che li supportano non lo fanno allo stesso modo. Non parliamo solo di differenze tra tipi di browser (Explorer, Netscape o Opera, per rimanere ai più diffusi) o tra versioni differenti degli stessi. In certi casi si sfiora davvero l'assurdo. Prendete quello che oggi è il browser più utilizzato al mondo, Internet Explorer 5. Ne esistono due versioni, una per Windows, l'altra per Mac: ci aspetteremmo che abbiano una identica capacità di aderire agli standard, stessa casa produttrice, stessa versione.....E invece no. La versione per Mac offre un supporto quasi pieno degli standard, cosa che il suo gemello per Win fa in maniera appena sufficiente. Molte dei bug sono per fortuna stati rivisti nella versione 6, anche se alla Microsoft, misteriosamente, non hanno implementato nell'ultima versione del browser alcune interessantissime funzionalità di Explorer 5 per Mac. Vedremo poi di cosa si tratta.
Alla luce dei problemi di compatibilità appena accennati, in questo articolo cercheremo di fare un po' di chiarezza e di suggerire alcune semplici soluzioni su un argomento cruciale: la scelta delle dimensioni dei font. Argomento cruciale perché per un medium ancora essenzialmente testuale qual'è oggi il web una scelta errata su questo fronte può mettere a repentaglio i requisiti minimi in termini di usabilità e accessibilità dei contenuti.
Come si fa (ceva) con html
Per definire la dimensione dei font in html si usa l'attributo size all'interno dell'etichetta font:
Dimensione del testo in html
I valori possibili di size sono espressi dalla scala da 1 a 7 definita a suo tempo da Netscape. In questa scala le dimensioni sono relative e si adeguano alle impostazioni che l'utente definisce nel suo browser. In pratica al valore di default, che è 3, corrisponde la dimensione impostata nelle preferenze tipografiche del browser. Per fare una prova crete una nuova pagina, scriveteci qualcosa e assegnate al testo come font size 3. Quindi nel vostro browser (è possibile solo con Opera o Netscape) modificate il valore predefinito, per esempio a 48. Caricate la pagina e vedrete che il testo viene visualizzato a 48 punti (o pixel in Netscape 6). Queste impostazioni, comunque, non vengono quasi mai modificate e presentano in genere come dimensione predefinita 12 punti.
Il tag font e i relativi attributi sono considerati svalutati nelle specifiche HTML 4 del W3C. In effetti questo sistema, specie quando è necessario avere diverse dimensioni dei caratteri nella stessa pagina, produce un codice confuso e difficilmente modificabile. Usando un CSS per stabilire gli attributi del testo, invece, avremo codice pulito e basterà modificare solo questo per cambiare l'aspetto di tutte le pagine del sito.
CSS font size: le dimensioni
Per esprimere le dimensioni dei font in un foglio di stile si possono usare le seguenti unità di misura:
- punti - P {font-size: 12pt}
- pixel - P {font-size: 12px}
- dimensioni assolute - P {font-size: medium}
- dimensioni relative - P {font-size: larger}
- em - P {font-size: 1,2em}
- percentuale - P {font-size: 90%}
In un mondo fatto di browser aderenti agli standard o nel Regno della Compatibilità Assoluta ciascuna di esse potrebbe essere usata senza particolari problemi. Ma noi siamo nel mezzo della Guerra dei Browser e delle Piattaforme e apparirà subito chiaro che alcune di esse vanno scartate senza esitazioni.
Punti
È l'unità di misura standard per il desktop publishing e per i prodotti orientati alla stampa. L'uso dei punti nella definizione delle dimensioni dei font è sconsigliato soprattutto per le differenze esistenti tra piattaforma Windows e Mac. In Windows la risoluzione predefinita del video è di 96 dpi, su Mac è di 72 dpi. Senza scendere in dettagli tecnici sulla risoluzione di stampa e quella video, basterà qui dire che una dimensione apparentemente ottimale per Windows può risultare insopportabilmente piccola su Mac. Alla Microsoft sembrano aver capito il problema e su Explorer 5 per Mac le impostazioni tipografiche standard sono modellate su quelle tipiche di Windows, 96 dpi e 16 pixel. Basterebbe però che l'utente torni ai classici 72 dpi per tornare al punto di partenza. Senza contare il fatto della compatibilità con i vecchi browser.
Insomma, l'uso dei punti non appare una scelta felice e d'altro canto, perchè usare un'unità di misura per la stampa su un medium tipicamente screen oriented?
Pixel
Se c'è un unità di misura rivolta al video quella è proprio il classico pixel. E qui non si corrono rischi: 10 pixel sono 10 pixel su tutte le piattaforme. È facile capire, dunque, che i pixel sono quello che fa per noi se vogliamo avere il massimo controllo possibile sul layout e sulla resa della pagina. Come si può vedere in figura 1 non ci sono particolari differenze nella resa di un testo a 14 pixel nei vari browser (la prova è stata effettuata ad una risoluzione video di 1024x768 su un monitor 17"):
L'unico browser che si differenzia leggermente è Netscape 4.7, che comunque ha la tendenza generale a rendere i caratteri più piccoli.
Tutto bene dunque? Un attimo: l'uso dei pixel ha una controindicazione di non poco conto. Se si blocca la dimensione non sarà possibile ingrandire il testo sfruttando l'apposita funzione presente nei browser. Per chi ritiene l'usabilità e l'accessibilità requisiti determinanti questo fatto può risultare inaccettabile. Ma la situazione non è poi così nera. Opera (a partire dalla versione 4), Netscape 6 e Explorer 5 per Mac consentono di effettuare lo zoom sul testo, a prescindere dall'unità di misura adottata (pixel compresi). Incredibilmente Microsoft non ha introdotto questa funzione in Explorer 6, continuando ad usare le funzionalità delle versioni precedenti e la classica scala che va da Molto piccolo a Molto grande e che non ha effetto sui pixel.
Per evitare problemi di accessibilità usando i pixel non resta che una via: usare dimensioni accettabili (minimo 12px) e fare test a varie risoluzioni per controllare che il testo risulti sempre leggibile.
Dimensioni assolute
Un'altra possibilità è quella di usare le dimensioni assolute.
Si tratta di 7 parole chiave che secondo il W3C dovrebbero essere il sistema
risolutivo. Vediamo quali sono:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
In effetti questa modalità, se ben implementata nei browser risulterebbe ottimale: sarebbe infatti una ridefinizione della classica scala dei valori di font size vista in precedenza. Tra l'altro, a differenza dei pixel e dei punti, il testo può essere ridimensionato, andando incontro alle esigenze di usabilità.
Purtroppo la maggior parte dei browser non supera brillantemente i test di compatibilità con questa soluzione. Non mi soffermo su Explorer 3 o sulle prime versioni di Netscape 4, con cui si ottengono risultati disastrosi. Si dirà che sono browser ormai in disuso e quindi trascurabili. Ma che dire di Explorer 5? Il più diffuso tra i browser non rende in maniera corretta questa impostazione. In pratica, posto come riferimento la scala di dimensioni dei font dell'html, al valore 3 dovrebbe corrispondere medium. Ma Explorer rende medium come size 4! Quindi se uso medium avrò in Explorer un testo molto grande (addio tabelle!). Il bug è stato risolto in Explorer 6, mentre anche Opera 5, un browser per certi versi da ammirare per il rispetto degli standard, soffre dello stesso malfunzionamento di Explorer 5.
Conclusione: ottima idea, ma da rivedere e rimandare a qualche anno in avanti, quando forse la dotazione di navigatori si sarà rinnovata.
Dimensioni relative
È una soluzione piuttosto limitata e mal supportata da molti browser. Si tratta
di due semplici parole, smaller e larger, che esprimono la dimensione di una
porzione di testo rispetto all'elemento parent.
Em
La stessa caratteristica di unità relativa è condivisa dall'em. 1 em corrisponde alla larghezza di una lettera m minuscola. Come unità di misura è spesso usata nel settore tipografico. Il suo uso è consigliato in alcune pubblicazioni o linee guida sui CSS, ma a livello pratico si scontra con le incompatibilità rivelate con alcuni browser, in particolare Netscape 4 e Internet Explorer 3.
Percentuale
L'ultima soluzione possibile è quella della percentuale. È anch'essa un'unità di misura relativa, ma pù potente e flessibile di quella vista sopra. Cosa rilevante, il testo espresso in percentuale può essere ridimensionato. Vediamo subito di capire come funziona. Ammettiamo di definire in un CSS questa regola:
BODY { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px}
e quindi questa:
TD { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 200%}
In pratica, poichè la percentuale è relativa all'elemento parent, all'interno della cella dovremmo avere un testo di 30 pixel (figura 2):
Questo uso della percentuale come unità di misura va però incontro a diversi problemi con la miriade di browser in circolazione. Non tanto perchè non sia supportata, ma per questioni legate all'ereditarietà delle proprietà tra i diversi elementi.
C'è però un sistema che ci consente di usare la percentuale in maniera efficace, Si tratta di definire le impostazioni sui font non a livello di tag (body, p, td, etc) ma con le classi. In questo modo non si va incontro a rischi particolari, anche se in un certo senso si travisa la natura di unità di misura relativa. È infatti possibile realizzare una sorta di tabella delle corrispondenze tra parcentuali e la scala da 1 a 7 dell'html classico (figura3: clicca per visualizzare).
Ammettiamo di volere applicare ad una cella di tabella un testo con dimensione corrispondente a size=4. Dovremo creare innazitutto una classe e settare come font-size 120%, così:
.testo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 120%; color: #000000}
Ora applichiamo la classe alla cella:
<td class="testo">Contenuto della cella</td>
e verifichiamo il risultato (figura 4):
Se in un'altra zona della pagina volessi un testo più piccolo, diciamo corrispondente a font size 2, mi basterebbe creare una nuova classe:
.testopiccolo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 84%}
che applichiamo magari a un paragrafo. Ecco il risultato (figura 5):
Tutto questo funziona, ripetiamolo, se non si assegnano valori relativi alla dimensione dei font a livello di tag. Potete certamente definire a livello di tag body proprietà come i margini, il colore di sfondo, etc. Basta avere l'accortezza di definire le dimensioni dei caratteri solo nella classi. Certo, in questo modo bisognerà forse creare tante classi e applicarle ogni volta che serve, ma i problemi tecnici e di compatibilità si ridurranno drasticamente.
Se volete avere la prova che questo approccio funzioni, posso consigliarvi di visitare il sito ufficiale Microsoft. Le dimensioni del testo sono fatte così. Provate a salvare la home page come pagina web completa e poi aprite il CSS che trovate nella cartella dei file. Solo classi e percentuali.
Conclusioni
Giunti alla fine possiamo tirare le somme. Delle soluzioni viste solo due appaiono realmente percorribili: usare i pixel e l'uso delle percentuali abbinato alle classi e non ai tag. Entrambe hanno pro e contro. E niente esclude una loro combinazione. I pixel in effetti hanno come unica controindicazione la questione del ridimensionamento. Se pensate che sia un punto trascurabile, questa è la vostra via.
