
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Ridimensionamento semplice dei caratteri
In questo articolo vedremo come sia possibile dare la possibilità di ridimensionare il testo delle nostre pagine web grazie ai fogli di stile e Javascript. Un’altra funzionalità che va a completare, insieme allo Style Switcher per tutti, la personalizzazione delle pagine web da parte dell’utente. In questo caso la personalizzazione riguarderà soltanto la dimensione del testo. Non è un argomento totalmente nuovo nella sezione PRO, articoli correlati a questo sono:
Prima di addentrarci nel vivo dell’articolo, mi è parso utile accennare ad alcuni principi di tipografia per il Web.
Vari studi hanno dimostrato che un testo leggibile è composto da linee di massimo 60-80 caratteri. Righe molto più lunghe o molto più corte causano difficoltà di lettura e comprensione. Più i caratteri sono piccoli, maggiore è la difficoltà di lettura se le righe di testo non sono ben distanziate. La spaziatura tra le righe è diretta conseguenza della proprietà line-height. Il line-height ottimale, a parer mio, oscilla tra 1.2 e 1.8, a seconda del font-size e della lunghezza della riga. Bisogna tener presente che font piccoli e linee lunghe richiedono line-height maggiore.
Mentre è provato che caratteri serif risultano molto più leggibili per la carta stampata, per il Web ci sono pareri discordanti. Personalmente ritengo che per caratteri medio piccoli siano meglio famiglie sans-serif, mentre per dimensioni maggiori vanno bene sia i serif che i sans-serif (si veda come introduzione l’articolo I font e la tipografia del testo).
Ultimamente si sta diffondendo l’uso del “Trebuchet MS” tra i font sans-serif. È un carattere che può andar bene per dimensioni non troppo piccole: a 12 pixel, ad esempio, risulta molto meno leggibile dell’Arial. Per i caratteri serif, invece, il Georgia può essere una valida alternativa al Times New Roman.
Un consiglio che mi sento di dare: non eccedere con il numero di font dei vari elementi di testo in una pagina web. Dovrebbero essere al massimo due. Un’idea potrebbe essere usare un font serif per gli headings (titoli) e uno sans per i paragrafi. Un’ultima parola sul colore: si consiglia di assicurarsi che ci sia sufficiente contrasto tra colore del testo e dello sfondo, e di non usare colori che affaticano la vista. Quello che bisogna sempre tenere presente realizzando siti web è che il loro scopo è comunicare.
Prima di concludere questa breve introduzione, ecco alcune valide risorse sulla tipografia per il web:
Dimensionamento consistente tra gli elementi di testo
È importante poter stabilire un dimensionamento proporzionale degli elementi testuali in una pagina web. I due modi per ottenerlo attraverso i fogli di stile sono sostanzialmente due: dichiarare la dimensione del testo in percentuale o in em. Nell’attribuire ad un elemento un font-size in percentuale ci si riferisce ad una percentuale del font-size del suo contenitore. Per esempio:
body{font-size: 14px}
h1{font-size: 180%}
L’h1, in tal caso, avrà dimensione pari al 180% del body, ossia 25 pixel.
Gli em, a differenza del percentuale, costituiscono una vera e propria unità di misura ma per quanto riguarda il font size possono assumere lo stesso ruolo della regola in percentuale. In pratica, considerando che 1em corrisponde a 100%, per trasformare percentuali in em basterà dividere per cento. Ecco l’analogo delle due regole viste qui sopra:
body{font-size: 14px}
h1{font-size: 1.8em}
Ed ecco uno scehema di CSS in cui, stabilita una dimensione di base per il corpo della pagina, fissiamo le proporzioni per i titoli:
body{
/*qui va la regola per il
font-size*/
font-family: Arial, Helvetica, sans-serif
}
h1,h2,h3,h4,h5,h6{font-family: Bodoni, Georgia, “Times New Roman”, Times, serif}
h1{font-size: 200%}
h2{font-size: 170%}
h3{font-size: 140%}
h4{font-size: 120%}
h5{font-size: 100%}
h6{font-size: 80%}
p{line-height: 1.5}
Un’osservazione sulle famiglie di font. Esse vengono definite dalla più “rara” (a cui verrà data la precedenza se questa è presente sul sistema dell’ utente), alla più diffusa, fino ad arrivare a quella generica di appartenenza. Un ulteriore spunto per “osare” e dichiarare famiglie di font ricercate proviene da Luxury Type. Potete trovare un elenco di font con percentuali di distribuzione per sistema operativo su Visibone Font Survey.
Abbiamo visto come sia possibile ottenere una proporzionalità tra gli elementi testuali di una pagina HTML. Fissando la misura del font del body in pixel, avremo automaticamente definito le dimensioni degli elementi principali. Ecco le regole tipografiche:
body{ font: 12px Arial, Helvetica, sans-serif}
h1,h2,h3,h4,h5,h6{font-family: Georgia,”Times New Roman”, Times, serif}
h1{font-size: 200%}
h2{font-size: 170%}
h3{font-size: 140%}
h4{font-size: 120%}
h5{font-size: 100%}
h6{font-size: 80%}
p{line-height: 1.5}
Personalmente ritengo che un approccio in pixel, combinato con la possibilità da parte dell’ utente di ridimensionare i caratteri attraverso la pagina stessa e non le impostazioni del browser possa costituire una buona soluzione per l’usabilità.
Finalmente arriviamo all’esempio dell’articolo. Si tratta di due pagine in cui il testo è ridimensionabile grazie a Javascript, e la preferenza dell’utente viene memorizzata attraverso un cookie. Ricordo che un cookie è un piccolo file di testo che memorizza sul computer dell’utente, in questo caso, la dimensione del testo preferito, così da poter mantenere questa informazione durante l’intera navigazione tra le pagine del sito e le visite successive.
Mentre un carattere di 12 pixel può risultare ben leggibile a basse risoluzioni, a risoluzioni più elevate può risultare troppo piccolo. Una semplice funzione Javascript, che ho chiamato SetFontSize, può andare ad intervenire sul font-size del body, e gli altri elementi si ridimensionaranno di conseguenza. Vediamo la chiamata attraverso i link all’interno della pagina. Questa è un esempio con la soluzione testuale, in cui i link vengono per il ridimensionamento vengono presentati attraverso del testo:
<div id=”controller”>
<h4>Dimensioni del testo</h4>
<a href=”javascript:SetFontSize(’12px’)”>Carattere piccolo</a>
<a href=”javascript:SetFontSize(’14px’)”>Carattere medio</a>
<a href=”javascript:SetFontSize(’16px’)”>Carattere grande</a>
</div>
Da notare che nel codice sopra, come nell’esempio, le tre dimensioni sono 12, 14 e 16 pixel, ma che modificando il testo tra singoli apici della chiamata a funzione è possibile impostare la dimensione come più vi piace.
Ho preparato una pagina con il codice Javascript da consultare online. Lo script contiene la funzione SetFontSize e due funzioni per la gestione dei cookie. Il principio di funzionamento è abbastanza semplice. Al caricamento della pagina si reperisce un eventuale cookie. Se questo è presente, l’utente ha già impostato la sua preferenza, che verrà attuata di conseguenza.
Nel momento in cui l’utente clicca su uno dei link per il dimensionamento del testo, viene scritto il cookie e impostato il font-size del body.
Ricordo che è importante informare chi ci legge, attraverso una pagina apposita, che è possibile intervenire sulla dimensione del testo della pagina, e che Javascript e cookie dovranno essere abilititati. Anche in questo caso, come per lo style switcher, un valido esempio è il sito del comune di Torino.
La soluzione che vedremo consente di ridimensionare il testo attraverso i classici “bottoncini” con le lettere a misura, che stanno ormai diventando una metafora comune nel web. Nell’esempio, costitutito da due pagine così da poter mostrare che la preferenza viene mantenuta tra una pagina e l’altra, ho realizzato i bottoncini attraverso testo e CSS. Vediamo l’HTML dell’esempio:
<div id=”controller”>
<a id=”size1″ href=”javascript:SetFontSize(’12px’)” title=”imposta il testo piccolo”>T</a>
<a id=”size2″ href=”javascript:SetFontSize(’14px’)” title=”imposta il testo medio”>T</a>
<a id=”size3″ href=”javascript:SetFontSize(’16px’)” title=”imposta il testo grande”>T</a>
</div>
Mi raccomando in tal caso di non dimenticare l’attributo title che è fondamentale per orientare l’utente. Ovviamente si possono usare anche le immagini (in questo caso oltre al title, è obbligatorio l’attributo alt) o con il testo esteso. Ho preferito farlo con i CSS dato che questa è probabilmente la soluzione più difficile da implementare, e chi la vorrà riutilizzare la potrà trovare già pronta nel pacchetto zip contenente le due pagine di esempio, il codice Javascript e i CSS. Sostanzialmente il testo delle tre T non è soggetto al dimensionamento dato che è dimensionato assolutamente, e cioè in pixel.
Per prima cosa sarà necessario impostare un dimensionamento proporzionale del font nel CSS, per esempio seguendo l’esempio di questo articolo. Si attribuisce al body la misura di base, nal caso 12px, e agli altri elementi, dove necessario, un dimensionamento relativo in percentuale o in em. Poi andrà linkato nella sezione head delle pagine HTML il file Javascript:
<script type=”text/javascript” src=”fontSize.js”></script>
Infine, basterà aggiungere i link per impostare la dimensione nell’HTML, e il gioco è fatto.
Scarica lo zip con il codice e gli esempi.
Se vuoi aggiornamenti su Testo a misura di utente con CSS e Javascript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
L’adozione delle metodologie Agile in Italia, consigli pratici per piccoli team di sviluppo.
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Utilizzare CSS ed HTML è più che sufficiente per realizzare uno slider interattivo da integrare all’interno di una pagina web, senza usare JavaScript.
Un tutorial semplice e pratico per imparare facilmente ed in modo rapido a realizzare un footer per la nostra pagina web utilizzando Bootstrap.
Alcuni esempi che mostrano come utilizzare CSS3 per realizzare forme geometriche di vario tipo, da includere all’interno di una pagina web.
Tailwind CSS è un framework CSS che si propone come alternativa a soluzioni più tradizionali ed abbondantemente diffuse come Bootstrap o w3.css. Rispetto a questi ultimi, Tailwind CSS si contraddistingue per l’approccio diverso, non più basato su classi che realizzano elementi già preconfenzionati, bensì sfruttando una serie di classi di utility per implementare le nostre idee direttamente nelle pagine HTML.