Lettering.js : "A jQuery plugin for radical web typography"

Hello !

Petite présentation d'un plugin jQuery permettant d'avoir plus de contrôle sur les textes d'une page web.

Lettering.js
- Site officiel : http://letteringjs.com/
- Sources sur Github + téléchargement : https://github.com/davatron5000/Lettering.js

Présentation par l'auteur : "Web type is exploding all over the web but CSS currently doesn't offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control."

En clair : Lettering.js va créer "à la volée" autant de classes qu'il y'a de lettres dans un mot donné.


Exemple concret :
Sur le site officiel, on voit par exemple "Lettering.js" avec plein de couleurs différentes (une par lettre).

Si vous regardez le code source de la page (CTRL + U), vous pourrez voir 2 choses :
- le titre (h1) est simplissime :
<h1 id="logo">Lettering.JS</h1>
Juste un id ajouté (permettant de cibler le script)
- le script est inséré et appliqué à l'id "logo" (appel de jQuery + intégration de lettering.js + lancement du code via $("#logo").lettering(); )


Si vous ouvrez la console développeur de votre navigateur (CTRL + MAJ + i) et que vous regardez le code généré, vous trouverez ceci :
<h1 id="logo"><span class="char1">L</span><span class="char2">e</span><span class="char3">t</span><span class="char4">t</span><span class="char5">e</span><span class="char6">r</span><span class="char7">i</span><span class="char8">n</span><span class="char9">g</span><span class="char10">.</span><span class="char11">J</span><span class="char12">S</span></h1>

Pour faire simple : un span contenant une class différente est inséré pour englober chaque lettre. Ensuite il ne reste plus qu'à les styler via CSS.

Ce plugin ne sert pas qu'à faire joli, il peut aussi être utilisé pour améliorer la typographie, la lisibilité etc.