L'ultimo articolo di A List Apart, dal titolo Text-Resize Detection, presenta un'idea nuova che offre molti spunti e possibili sviluppi: intercettare il font-size del browser e il suo cambiamento per prevenire problemi di layout e sovrapposizioni di contenuto intervenendo con i CSS.
L'idea alla base è simile al Resolution dependent layout proposto un po' di tempo fa da Cameron Adams e citato nell'articolo di ALA, in cui Javascript è in grado di fornire un CSS ad hoc in base alla larghezza della finestra del browser. Per le dimensioni del font le cose non sono però così semplici, dato che non c'è un modo diretto per rilevare il font-size del browser né un evento collegato
al suo ridimensionamento.
Lawrence Carvalho e Christian Heilmann, autori dell'articolo, si sono avvalsi quindi della Yahoo! User Interface Library e in particolare dei suoi custom events per realizzare
uno script molto semplice da utilizzare che:
- crea uno span nascosto con uno spazio al suo interno;
- legge l'altezza di tale elemento e la memorizza;
- registra funzioni listeners da chiamare quando il font-size cambia;
- controlla periodicamente se l'altezza dello span è cambiata, il che significa che l'utente ha ridimensionato il font-size.
Notevoli l'esempio base e sopratutto una possibile applicazione pratica
dello script in cui un menu orizzontale si trasforma in una lista verticale a dimensione del font molto grande.
Lo script non è purtroppo in grado di intercettare il ridimensionamento del carattere, ma solo il font-size iniziale, in Internet Explorer 7 e Opera se si utilizza la loro modalità zoom ma non dovrebbe costituire un problema dato che questa modalità opera con un registro molto differente rispetto al cambiamento del font-size.
Rimando a Text-Resize Detection per approfondimenti
e il download di script ed esempi.