Tipografia creativa con il plugin jQuery Lettering.js

Tra i plugin jQuery più interessanti emersi negli ultimi mesi c'è sicuramente Lettering.js. Il suo scopo primario è quello di offrire al web designer la possibilità di esplorare nuovi orizzonti creativi in fatto di tipografia. Lettering.js, infatti, prepara il terreno per un'applicazione più immediata e semplice dei CSS, ai quali è comunque demandato il compito di formattare il testo in modo creativo. Possiamo sintetizzare così: tutto quello che si può ottenere sfruttando questo plugin si può ottenere usando solo i CSS, ma con Lettering.js il compito risulta come vedremo enormemente semplificato.

Per avere un'idea di quello che si può realizzare non c'è modo migliore che visitare i siti segnalati sulla home page del progetto.

Come funziona

In questo articolo non ci sbizzarriremo più di tanto alla ricerca dell'effetto da urlo, baderemo al sodo mostrando le modalità di funzionamento dello script.

Per iniziare sarà necessario scaricare il plugin da GitHub, dove è disponibile nella versione standard e compressa.

A questo punto possiamo a lavorare ad un primo esempio dimostrativo.

Per implementare lo script dovremo innanzitutto richiamarlo insieme a jQuery nella sezione head del documento:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>

Il terreno è pronto, non ci resta che decidere su cosa applicare le potenzialità di Lettering.js. È chiaro che il plugin non è pensato per formattare in maniera pesante lunghe porzioni di testo, a nessuno verrebbe in mente di adoperarlo, per dire, sul corpo di questo articolo, anche per i problemi di carico a livello di memoria che ciò comporterebbe. L'ideale è usarlo per titoli, intestazioni, per tutti quegli elementi della pagina che meritano un risalto particolare a livello tipografico e creativo.

Nel nostro esempio abbiamo un semplice div con all'interno un titolo h1:

<div id="demo1" class="demo">
<h1>Rainbow</h1>
</div>

Occhio all'id e alla classe assegnata al div perché sono indicazioni che ci saranno subito utili.

È infatti il momento di inizializzare lo script. Subito dopo l'incorporamento degli script andiamo così ad aggiungere questa semplice istruzione:

<script>
$(document).ready(function() {
  $("#demo1 h1").lettering();
});
</script>

Nella tipica sintassi alla jQuery, stiamo dicendo al browser di applicare il metodo lettering() all'elemento h1 discendente del div con id demo1.

Per fare cosa? Il 'cosa' lo stabiliamo attraverso i CSS, tenendo presente l'operazione fondamentale compiuta da Lettering.js sul testo che gli indichiamo (il nostro titolo h1 nell'esempio). Il plugin non fa altro che suddividere la parola in lettere; ciascuna lettera viene racchiusa in uno <span>; ogni <span> assume una classe del tipo .char1, .char2, etc, a seconda del numero di caratteri che la compongono.

In pratica, partendo dalla parola 'Rainbow', composta da 7 lettere, grazie a Javascript il browser restituirà questo risultato (lo screenshot è stato fatto sul Web Inspector di Safari):

Link utili

• home page del progetto

Attenzione, dunque, ora sappiamo di avere a disposizione un titolo h1 all'interno di un div con id #demo1 e classe .demo e che ciascuna lettera è racchiusa in uno span con classe .char1, .char2, etc. La struttura è chiara e pronta, non ci resta che mettere mano al CSS.

Nell'esempio abbiamo:

.demo {color: red;}
.demo h1 { font-size:72px;  text-transform:uppercase; margin-bottom:0px;}
.char2 { color: orange; }
.char3 { color: yellow; }
.char4 { color: blue; }
.char5 { color: green; }
.char6 { color: indigo; }
.char7 { color: violet; }

Con la prima regola assegniamo un colore di default per i contenuti del div, il rosso (red): sarà quello che vedranno gli utenti che hanno Javascript disabilitato.

Dopo aver impostato le dimensioni del titolo, creiamo delle regole per ciascuna lettera agganciandoci alle classi .char. La prima lettera, non essendo stata usata una regola per .char1, eredita il colore rosso.

Una volta compreso il meccanismo, il solo limite è la propria creatività. Nel secondo esempio abbiamo giocato un po' sulle classi .char modificando famiglia di font e dimensioni:

.char2 { font-family: Georgia, Times, serif; color: orange; }
.char3 { color: yellow; }
.char4 { font-family: Georgia, Times, serif; color: blue; }
.char5 { color: green; }
.char6 { font-family: Georgia, Times, serif; color: indigo; }
.char7 { font-size: 90px; color: violet; }

Ricordiamo però che qualunque proprietà CSS può essere definita. Possiamo aggiungere un'ombra, ruotare la lettera usando le trasformazioni CSS3, tutto.

Agire sulle parole

Lettering.js consente di agire, oltre che a livello di singole lettere, anche a livello delle singole parole che compongono una frase. Nell'esempio 3 il testo di partenza è infatti questo:

<div id="demo1" class="demo">
<h1>Rainbow is beautiful</h1>
</div>

Come avete potuto osservare visualizzando la pagina, ciascuna parola presenta un colore diverso. Come si ottiene l'effetto.

Nella parte Javascript, sarà necessario specificare il parametro 'words' per il metodo lettering (), così:

$(document).ready(function() {
 $("#demo1 h1").lettering('words');
});

L'esito reso dal browser corrisponde a quanto visibile nella figura che segue:

Come si vede, ciascuna parola viene racchiusa in uno <span> con una classe del tipo .word1, .word2, etc.

A livello di CSS, non ci resta che agire di conseguenza. Ecco il codice usato nell'esempio:

.word1 { font-family: Georgia, Times, serif; color: orange; }
.word2 { color: yellow; }
.word3 { font-family: Georgia, Times, serif; color: blue; }

La cosa interessante è che Lettering.js consente di sfruttare entrambi i metodi visti finora. Ovvero: suddividere la frase in parole e le singole parole in lettere per applicare gli stili che più ci aggradano.

Nel quarto esempio abbiamo usato queste righe di Javascript per inizializzare lo script:

$(document).ready(function() {
 $("#demo1 h1").lettering('words').children("span").lettering();
});

Al titolo h1 discendente del div con id demo1 applichiamo il metodo lettering('words'), agli elementi figli il metodo lettering() che suddivide la parola in tanti span quante sono le lettere.

Per ottenere gli effetti desiderati basterà agire ancora una volta sui CSS:

.word1 { font-family: Georgia, Times, serif; color: orange; }
.word2 { color: yellow; }
.word3 { font-family: Georgia, Times, serif; color: blue; }
.char2 { color: green; }
.char6 { color: indigo; }
.char7 { color: violet; }

Le singole parole saranno rispettivamente in arancione, giallo e blue; la seconda, sesta e settima lettera (dove presenti) avranno colori diversi.

Agire su blocchi di testo

Il plugin offre un ultimo metodo tramite il quale si può operare su blocchi di testo definiti a piacere. Per preparare il terreno è necessario suddividere la frase in blocchi usando il tag <br>:

<div id="demo1" class="demo">
<h1>Rainbow is beautiful,<br>
very beautiful</h1>
</div>

Si badi che il <br> serve solo allo script per trovare un punto in cui spezzare la frase e definire un blocco; il browser non suddividerà il testo su più righe come ci si aspetterebbe usando <br>.

Su questa base, l'inizializzazione dello script sarà la seguente:

$(document).ready(function() {
 $("#demo1 h1").lettering('lines');
});

Avendo usato un solo <br>, la frase è suddivisa in due blocchi. Hanno come classe, rispettivamente, .line1 e .line2. Il CSS risulta così definito:

.line1 { font-family: Georgia, Times, serif; color: orange; }
.line2 { color: yellow; }

Ecco il risultato.

Il codice è disponibile per il download. Buona tipografia e buona sperimentazione a tutti!