Giorno 26 – Usate dimensioni relative per i font

Giorno 26: Usate dimensioni relative per i font

I siti web, con poche eccezioni, sono centrati intorno alle parole. Notizie, opinioni, pensieri, idee, storie, testi originali, commercio elettronico: tutte parole. La progettazione visuale e le immagini sono importanti, certamente, ma se gli utenti non possono leggere le parole, a che serve?

Nell’autunno del 2000, Jeffrey Zeldman disse che l’uso di font a dimensione relativa era impossibile (“pixels, baby… or nothing”, “pixel, ragazzi, o nulla”) a causa di un numero incredibile di bug nei browser, per iniziare con Netscape 4 sino ai più recenti. Da allora, Netscape 4 non è migliorato, e non è ancora fuori mercato, ma abbiamo almeno imparato una o due cose per domare i browser e far diventare realtà l’uso delle grandezze relative dei font. (Anche Zeldman; il suo recente reincarnato Web Standards Project usa le tecniche descritte qui sotto.)

Usate dimensioni di font relative nei browser che possono trattarle e dimensioni assolute per Netscape 4, che non dà affidabilità nel supportare dimensioni di font relative. Potete farlo anche se non utilizzate fogli di stile multipli. Tra un minuto, vi fornirò una soluzione ‘copia ed incolla’ per il modello predefinito di Movable Type e tutti i temi predefiniti di Radio. E una lunga spiegazione della tecnica usata, per aiutarvi ad implementarla negli altri modelli.

A chi serve?

• A Lillian. Lillian ha difficoltà a vedere chiaramente le pagine, a causa, null’altro, che della sua età. Come l’80% degli utenti di internet, usa Internet Explorer per Windows, che non consente di ridimensionare la grandezza del testo, a meno che il progettista non abbia specificato esclusivamente dimensioni di font relative. Lillian ha cambiato la dimensione del testo preimpostata nel browser (sotto “Visualizza” (View)alla voce “Carattere” (Text Size)), senza ottenere vantaggi in quei siti che usano dimensioni assolute per i font. Questo include virtualmente ogni modello di weblog esistente. Per esempio, ecco come Lillian vede le pagine con il modello preimpostato di Movable Type:

Se il modello usasse le dimensioni relative per i font, nulla cambierebbe per la maggior parte degli utenti, a cui non importa cambiare la dimensione del testo. Ma ecco cosa vedrebbe invece Lillian:

• Di nuovo: se la gente non può leggere le vostre parole, a che serve?

Come fare: Radio

Nel modello di Home Page, guardate nella sezione <style> vicino all’inizio della regola CSS che appare così:

body, td, th, p {

font-family: verdana, sans-serif;

font-size: 12px;

}

Lasciatela così, ma, subito dopo, aggiungetevi questo:

/*/*/a{}

body,

body td,

body th,

body p {

font-size: x-small;

voice-family: "\"}\"";

voice-family: inherit;

font-size: small;

}

html>body,

html>body td,

html>body th

html>body p {

font-size: small;

}

/* */

Assicuratevi di includere i commenti ( /* */) all’inizio e alla fine. Rappresentano la chiave di tutta la soluzione, come spiegato più avanti.

Come fare: Movable Type

Il modello preimpostato di Movable Type è più complesso di quello di Radio, ma faremo le stesse cose, solo con qualche passo in più. Nel modello Stylesheet (styles-site.css), aggiungete questo alla fine:

/*/*/a{}

body,

body a,

body .calendar,

body .calendarhead,

body .title,

body .sidetitle,

body .syndicate,

body .powered,

body .comments-post,

body .posted {

font-size: xx-small;

voice-family: "\"}\"";

voice-family: inherit;

font-size: x-small;

}

html>body,

html>body a,

html>body .calendar,

html>body .calendarhead,

html>body .title,

html>body .sidetitle,

html>body .syndicate,

html>body .powered,

html>body .comments-post,

html>body .posted {

font-size: x-small;

}

body .date {

font-size: x-small;

voice-family: "\"}\"";

voice-family: inherit;

font-size: small;

}

html>body .date {

font-size: small;

}

body #banner {

font-size: 200%;

}

body .description {

font-size: 60%;

}

body .blogbody {

font-size: 110%;

}

body .blogbody,

body .calendar,

body .calendarhead,

body .side,

body .title,

body .sidetitle,

body .syndicate,

body .powered,

body .comments-body {

line-height: 128%;

}

/* */

Di nuovo, accertatevi di aver incluso i commenti all’inizio ed alla fine.

Come fare: spiegazione dettagliata

L’idea base è utilizzare le parole chiave relative alle dimensioni dei font. Sono poco usate (perchè danno problemi nei vecchi browser), ma hanno tre interessanti proprietà:

1. Non si sommano. Se avete una sezione “main” dimensionata al 90%, e al suo interno avete una sezione “post” dimensionata a 90% , alcuni browser visualizzeranno quest’ultima ad 81% (90% x 90%), mentre alcuni la visualizzeranno al 90%. Con più di un livello di nidificazione (molto comune nei modelli che usano le tabelle per l’impaginazione), il testo diventa presto piccolo ed illeggibile, per effetto della somma delle percentuali. Però se la sezione “main” è dimensionata come small , e quella “post” al suo interno è sempre small, tutti i browser visualizzeranno la sezione “post” come small.
2. Si ridimensionano correttamente in Internet Explorer per Windows. Questo è strano, sembrerebbe che small rappresenti una grandezza assoluta (soprattutto alla luce del fatto che small nidificato all’interno di small è sempre small , vedi sopra), ma funziona. Cosa posso dirvi? IE/Win ridimensiona il testo con le parole chiave per i font. Lo giuro.
3. Non diventano mai troppo piccoli. L’impostazione della grandezza “Carattere” che Lillian usa in Internet Explorer può essere usata per rimpicciolire così come per ingrandire il testo. Molte persone con buona vista preferiscono leggere tutto ad una o due dimensioni più piccole del normale. Il testo dimensionato in percentuale tende a diventare microscopico e illeggibile quando è combinato con la più piccola dimensione impostabile dall’utente. Comunque, il testo dimensionato con le parole chiave per le dimensioni dei font, risulta almeno a 9px, leggibile in ogni famiglia di caratteri (se avete buona vista, s’intende).

Così utilizzeremo le parole chiave della dimensione dei font per specificare la dimensione base. E se su questo abbiamo bisogno di un controllo più fine, useremo le precentuali, ma solo sulle classi terminali che contengono testo (ovvero in “post”, ma non in “main”) per evitare la somma delle percentuali, e non troppo piccolo, per evitare che diventi microscopico se combinato con la scelta dell’utente di impostare la dimensione del carattere alla più piccola possibile.

Ecco l’idea base sull’uso delle parole chiave delle dimensione dei font:

p {

font-size: 12px;

}

/*/*/a{}

body p {

font-size: x-small;

voice-family: "\"}\"";

voice-family: inherit;

font-size: small;

}

html>body p {

font-size: small;

}

/* */

Ce n’è abbastanza qui, ed è tutto importante, dunque seguite con attenzione.

1. Innanzitutto, definiamo una dimensione assoluta (12px) per ogni <p>. Tutti i browser, incluso Netscape 4, applicheranno questo stile.
2. Poi includiamo lo strano commento “/*/*/”. A causa di un difetto di Netscape 4, tutto quello che segue questo commento, sino al prossimo, viene ignorato. Ecco fatto, gli stili successivi saranno applicati da tutti eccetto Netscape 4.
3. Immediatamente dopo i commenti, includiamo una regola vuota “a {}”. Opera 5 per Mac, anche lui per errore, ignora questa regola (e solo questa). Tutto il resto, lo applica.
4. Dunque abbiamo escogitato un modo per cui abbiamo definito regole che si applicano a tutti i browser, eccetto che a Netscape 4. Ora possiamo iniziare a definire le dimensioni relative dei font (che Netscape 4 non può comprendere). La prima cosa da fare è utilizzare il selettore “body p” per ridefinire il comportamento del tag p. A causa del modo in cui i CSS lavorano, questo prevarrà sul comportamento del precedente selettore p. (In termini tecnici, “body p” è un selettore più specifico di “p”.)
5. Ridefiniamo la dimensione del font di tutti i tag <p> come x-small. Questa è una parola chiave che, con le impostazioni predefinite, verrà interpretato da Internet Explorer 5 per Windows come 12px. Però, se l’utente cambia la dimensione in “Carattere”  (Text Size) nel menù “Visualizza” (View), questo testo si ridimensionerà più piccolo o più grande, a seconda della scelta dell’utente. Questo è quello che vogliamo. (Nota: abbiamo così definito la dimensione dei font 2 volte per IE5/Win, ma è tutto ok, perchè il selettore più specifico ha sempre la meglio, e quello precedente è semplicemente ignorato.)
6. Sfortunatamente, ecco ancora un errore di IE5/Win con le parole chiave delle dimensioni dei font; tutti gli altri browser al mondo (IE5/Mac, Netscape 6, Mozilla, IE6/Win) traducono x-small con 10px, e non con 12px. Fortunatamente per noi, anche con IE5/Win vi è un modo per superare l’errore: quando arriva alla voce voice-family, sbagliando, pensa che tutto il selettore “body p” sia già finito, e dunque ignora tutte le linee successive sino a “}”.
7. Ora abbiamo escogitato un modo per deinire le regole da applicare a tutti i browser, eccetto che a IE5/Win (e Netscape 4, che continua beatamente ad ignorare tutto questo). Così ridefiniamo la dimensione a small, che i browser moderni, eccetto IE5/Win, ovvero gli unici ora in ascolto, interpretano correttamente come 12px (all’impostazione predefinita). Di nuovo, se l’utente ingrandisce la dimensione del “carattere”, il testo sarà scalato conseguentemente; proprio quello che vogliamo.
8. Ma, un attimo! Opera 5 commette lo stesso errore di intepretazione di IE5/Win con voice-family, confondendosi, ma valuta correttamente la parola chiave del font, così ora il nostro testo appare troppo piccolo in Opera 5.  Fortunatamente, Opera 5 implementa un  terzo tipo di selettore, “html>body p”. (Di nuovo, questo è ”più specifico” di “body p”, e quindi ha la priorità sul selettore precedente.) IE5/Win non interpreta questo selettore, semplicemente lo ignora, ed è quello che vogliamo (avendo già compensato gli errori di interpretazione, non vogliamo di certo incasinarci ora). Anche IE6/Win non lo interpreta, ma va bene, perchè lo abbiamo già intercettato con il “font-size: small” dopo il  ”voice-family: inherit” nel selettore ”body p”.  Tutti gli altri browser interpretano il selettore “html>body”, e così, per loro, siamo giunti a definire la dimensione del font  quattro volte. Ancora una volta, questo non è un problema, perchè il selettore più specifico ha sempre la meglio, e tutto il resto è semplicemente ignorato.
9. Per finire, abbiamo un’insieme di commenti vuoti: /* */. Questi consentono a Netscape 4 di reiniziare ad interpretare i comandi. Se definiamo qualsiasi altra regola dopo questi commenti vuoti, tutti i browser (incluso Netscape 4) la applicheranno.

Ricapitolando:

1. Netscape 4 visualizza i testi in <p> a 12px, a prescindere dalle impostazioni dell’utente.
2. Internet Explorer 5 per Windows visualizza i testi in <p> come x-small , ovvero come se fosse 12px nell’impostazione predefinita, ma se l’utente aumenta l’mpostazione della dimensione del testo, in Carattere nel menù Visualizza, il testo viene visualizzato più grande.
3. Internet Explorer 6 per Windows visualizza i testi in <p> come small, a causa della regola “font-size: small” nel selettore “body p”. Ciò equivale a 12px nell’impostazione predefinita, ma viene ingrandita se l’utente aumenta la grandezza del testo dall’apposita voce di menù.
4. Internet Explorer 5 per Mac, Opera, Netscape 6, Mozilla, e (si spera) tutti i browser futuri visualizzeranno i testi in <p> come small, a causa della regola “font-size: small” nel selettore “html>body p”. Ciò equivale a 12px nell’impostazione predefinita, ma risulta ingradita se l’utente utilizza la funzione di zoom del testo.

Approfondimenti

• Mark Pilgrim: Relative Font Sizing HOWTO. Fornisce essenzialmente la stessa spiegazione, ma la stessa pagina è un’esempio di questa tecnica, così da poterla vedere in azione.
• Todd Fahrner: Size Matters: Making Font Size Keywords Work.
• Caio Chassot: Hiding CSS from Netscape 4 senza l’uso di fogli di stile multipli.
• Tantek Çelik: Box Model Hack. Come nascondere i CSS in Internet Explorer 5 per Windows.
• The Web Standards Project usano anch’essi la parole chiave dei fonticon IE5/Win, anche se utilizzano una soluzione basato su Javascript  (al posto dei commenti) per superare i problemi di Netscape 4.
• Owen Briggs: Text Sizing. Schermate di varie tecniche per la dimensione relativa di font in varii browser e piattaforme, con impostazioni predefinite di dimensionamento del testo.