web e font: Sezionare e contollare i testi con Lettering JS

LetteringJS è una libreria JQuery che permette di avere un controllo totale dei testi in una pagina web, nasce come alternativa più approfondita all’uso dei CSS come pseudo-classi e pseduo-elementi (vedi articolo: introduzione pseudo elementi)

LetteringJS rende la personalizzazione di qualsiasi lettera, parola o linea più facile e veloce, puoi scaricare da Github sia la versione normale che minified dello script.

Andiamo a vedere come usare questa libreria, partendo dall’incorporazione dello script nella nostra pagina tra i tag head

<script src="directory/jquery-1.4.2.min.js"></script>
<script src="directory/jquery.lettering.min.js"></script>
<script> Spazio in cui inserire le istruzioni LetteringJS </script>

Controllo delle singole lettere.

Lettering JS ci permette di sezionare ed estrapolare ogni singola lettera di un testo, partiamo da questo esempio:

<h1 class="titolo_prova">FMDesign</h1>

Adesso tra i tag script inseriamo il seguente codice, dove .titolo_prova è la classe target e lettering() indica l’operazione da compiere.

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

Ed ecco il risultato, per ogni lettera del titolo H1 lo script ha creato una classe .char# da editare con i CSS.

<h1 class="titolo_prova">
  <span class="char1">F</span>
  <span class="char2">M</span>
  <span class="char3">D</span>
  <span class="char4">e</span>
  <span class="char5">s</span>
  <span class="char6">i</span>
  <span class="char7">g</span>
  <span class="char8">n</span>
</h1>

Controllo delle parole:

Se invece vogliamo agire su ogni parola dobbiamo usare l’istruzione .lettering(‘words’);
Ecco un esempio:

<h1 class="word_split">FMDesign Blog</h1>

<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

Ed ecco il risultato, in questo caso lo script ha riconosciuto lo spazio vuoto tra le lettere separandole in due .word# differenti che potremo utilizzare con i CSS.

<h1 class="word_split">
  <span class="word1">FMDesign</span>
  <span class="word2">Blog</span>
</h1>

Controllo di ogni linea:

Infine possiamo anche agire anche su intere linee di testo con un numero indeterminato di lettere o parole, ogni linea deve essere separata l’una dall’altra dal tag
per essere riconosciuta e divisa, per esempio:

<p class="line_split">FMDesign Blog<br /> é un blog multitematico <br /> dove troverete articoli su<br /> web design.</p>

Adesso inseriamo tra i tag script l'istruzione <strong>.lettering('lines');</strong>
<script>
$(document).ready(function() {
  $(".line_split").lettering('lines');
});
</script>

Ed ecco il risultato, in questo caso per editare ogni singola linea con i CSS dovremo fare riferimento alla classe .line#

<p class="line_split">
  <span class="line1">FMDesign Blog</span>
  <span class="line2">é un blog multitematico</span>
  <span class="line3">Dove troverete articoli su</span>
  <span class="line4">web design</span>
</p>

kerning

Un ultima importante caratteristica di questa libreria JQuery è la possibilità di scegliere per ogni lettera una dimensione di Kerning in maniera da gestire al meglio gli spazi.

$("#id dell'elemento con cui usare il kerning).lettering();

e successivamente per ogni .char# settarne margini interni ed esterni o posizioni nella pagina web.

Esempi e ispirazioni

Eldorado

Atlantis

Sexy lettering

Moon 2040

Conclusioni

LetteringJS è sicuramente una libreria JQuery di grande potenziale e di facile utilizzo, credo comunque che sia importante non abusarne, dividere ogni singola lettera o parola presente nella tua pagina web non è di certo una buona pratica, è da usare con cautela può essere una ottima soluzione sopratutto per loghi contenti testo, titoli, citazioni e elementi simili.

Condividi questo articolo:

• Tweet

Info sull' autore:

Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di Francesco