Ridimensionare i caratteri con un click

L’importanza di poter ridimensionare i caratteri

Spesso molti webmaster, o presunti tali, operano con monitor molto grandi, usano colori poco contrastanti e utilizzano font dalle dimensioni molto ridotte. Come conseguenza un utente che visiti un sito con con caratteri piccoli e poco contrastanti e che non abbia un’ottima vista (per quanto mi riguarda ho una vista eccellente ma non sempre riesco a leggere ben le pagine di molti siti) ha due sole possibilità: sforzare la vista, abbandonare il sito. Certo molti browser offrono l’opportunità di ingrandire i caratteri dello schermo, ma quanti utenti di suddetti browser conoscono tale opportunità? Tutto sarebbe molto più semplice se ci fosse un link da attivare che modificasse la dimensione dei font del sito che si sta visitando senza dover ricorrere ai menu. Sarebbe inoltre bello che il sito ricordasse qual è la dimensione dei font preferita da ogni utente. Tutto questo è possibile con un intelligente uso dei CSS e lo sfruttamento del DOM, attraverso un semplice script. Guardate la pagina di esempio e capirete subito le potenzialità di questo strumento.

 

Come impostare la dimensione dei caratteri

Nel foglio di stile si dovrà optare per le unità di lunghezza relative. Il BODY dovrà avere la dimensione dei font espressa in unità percentuali (nota: nel body è preferibile utilizzare unità percentuali rispetto le unità em, a causa di un comportamento bizzarro di IE quando si ridimensionano i caratteri con il menu “Visualizza > Carattere”), gli altri selettori dovranno avere la dimensione dei font espressa in unità percentuali o in unità em. Ad esempio:

body { font-size: 80%; }
h1 { font-size: 2em; }
.nota { font-size: 0.9em; }

In questo modo, modificando la dimensione del font del BODY, sarà possibile modificare la diemensione dei font di tutti gli elementi della pagina. Per modificare la dimensione del font del BODY sfrutteremo il DOM tramite JavaScript.

 

Il codice JavaScript

Per modificare la dimensione dei font utilizzeremo il seguente codice JavaScript [scarica il file] che, oltre ad apportare le modifiche necessarie, memorizza in un cookie la dimensione del font desiderata.

function createCookie(name,value,days) {
// istruzioni per creare il cookie, non interessa ai fini dell'articolo}

function readCookie(name) { // istruzioni per leggere il cookie, non interessa ai fini dell’articolo
}
function setFontSize(size) {
var body = document.getElementsByTagName(‘body’)[0];
var percentuale = “80%”; // default
if (size == 1) percentuale = “70%”;
if (size == 2) percentuale = “80%”;
if (size == 3) percentuale = “90%”;
if (size == 4) percentuale = “100%”;
if (size == 5) percentuale = “110%”;
body.style.fontSize = percentuale;
createCookie(‘TuoSitoFontSize’,size,365);
}

window.onload = function() {
size = readCookie(‘TuoSitoFontSize’);
setFontSize(size);
}

 

La funzione setFontSize()

La funzione setFontSize() è la funzione principale, essa si occupa di impostare la dimensione del font del BODY in base al valore della variabile size (passata come argomento della funzione la funzione setFontSize()) e di memorizzare tale dimensione in un cookie.

La prima operazione che la funzione sovlge è quella di memorizzare l’oggetto rappresentato dal tag BODY nella variabile body:

var body = document.getElementsByTagName('body')[0];

Successivamente, in base al valore della variabile size viene calcolato il valore, espresso in unità percentuali, da dare alla dimensione del font del BODY, di default si imposta la dimensione specificata nel foglio di stile (in questo caso 80%). Il valore calcolato è memorizzato nella variabile percentuale.

var percentuale = "80%"; // default
if (size == 1) percentuale = "70%";
if (size == 2) percentuale = "80%";
if (size == 3) percentuale = "90%";
if (size == 4) percentuale = "100%";
if (size == 5) percentuale = "110%";

Una volta calcolato il valore da dare alla dimensione del font del BODY, tale dimensione viene applicata attraverso l’istruzione:

body.style.fontSize = percentuale;

A questo punto il valore della variabile size viene memorizzato in un cookie:

createCookie('TuoSitoFontSize',size,365);

 

Come viene utilizzato il cookie

Quando una pagina viene caricata viene letto il valore della variabile size e viene richiamata la funzione setFontSize(). Se non è memorizzato nessun valore valido, viene usato il valore di default.

window.onload = function() {
size = readCookie('TuoSitoFontSize');
setFontSize(size);
}

 

Come invocare la modifica della dimensione del font

Per invocare la modifica della dimensione dei font si può utilizzare un link che invochi la funzione setFontSize() con un opportuno argomento:

<a href="javascript: setFontSize(1)">caratteri piccoli</a>

 

Limiti e suggerimenti

Lo script funziona solo con i browser che abbiano un valido supporto del DOM, come mozilla, IE5.5, IE6 (no Opera 6). I browser che non supportano poortunamente il DOM non avranno nessun tipo di problema.

Qualora si desiderasse non modificare la dimensione dei font di alcuni elementi (ad esempio i form), si può impostare la dimensione dei font in pixel.

File correlati: Esempio

Potrebbero interessarti anche i seguenti articoli

  • L’uso dei Fogli di StileL’uso dei Fogli di Stile Uno dei principi base dell’accessibilità di un documento Web è che il contenuto e la sua struttura siano separati. Non importa che grandezza vogliamo dare ai titoli […]
  • Twitter non è per tutti, e non è il solo.Twitter non è per tutti, e non è il solo. La notizia è vecchia, per la precisione risale al 23 settembre, data in cui sono stati conferiti i premi ACCESS-IT 2009, ma la riflessione è amara e purtroppo sempre […]
  • Uso dei testi ALT all’interno di IMGUso dei testi ALT all’interno di IMG di Alan J. Flavell, del Dipartimento di Fisica ed Astronomia dell'Università di Glasgow. Traduzione in italiano di Michele Diodati   Un grave problema di […]
  • La triologia del browserLa triologia del browser I linguaggi di marcatura e le relative marcature sono oramai conosciuti in tutti i possibili usi e combinazioni e anche lo sviluppatore alle prime armi con HTML, XHTML, […]
  • Fieldset, Legend e Screen ReaderFieldset, Legend e Screen Reader Traduzione - autorizzata dall'autore - dell'articolo "Fieldsets, Legends and Screen Readers" di Steve Faulkner del 22 novembre 2007 Il raggruppamento e […]
Condividi:

Informazioni sull'autore

Gianluca Troiani
Gianluca Troiani
Nato a Roma nel Gennaio del '76, da alcuni anni cerco di conseguire una laurea in Ingegneria Elettronica. Ho iniziato a realizzare siti web utilizzando una quantità esagerata di immagini, tabelle ed "effetti speciali": una orribile confusione. Abbandonati i tool WYSIWYG, ho abbracciato la causa dell'accessibilità, dell'usabilità, del rispetto degli standard W3C. Da tempo mi diverto a sperimentare le potenzialità dei CSS come unico strumento di definizione dell'aspetto delle pagine web.  L'esperienza accumulata mi ha mostrato come i CSS siano (insieme all'XHTML) l'unica via di salvezza per i webmaster e gli utenti dei siti web, poiché l'utilizzo dei fogli di stile permette di realizzare siti web leggeri, accessibili, usabili, conformi agli standard W3C, facili da gestire, belli. Ho così deciso di realizzare un intero sito web (www.constile.org) dedicato all'uso avanzato dei CSS, on-line dal 16 Ottobre 2002. Il 4 Novembre 2002 ho ricevuto una proposta di collaborazione al progetto Webaccessibile.org. Onorato dalla richiesta, ho accettato con entusiasmo. L'obiettivo che mi sono posto partecipando al progetto è la realizzazione di articoli che mostrino come i CSS possano contribuire al miglioramento dell'accessibilità di quello straordinario mezzo di comunicazione di massa noto col nome di "Internet".

Commenti

Nessun commento

    Rispondi

    Link e informazioni