Une petite démo technique qui permet de faire joujou (alpha) : http://www.maximelebreton.com/labs/cifr/alpha/
Petite mise en situation dans un site en cours de prod : http://www.maximelebreton.com/dev/gazettedudragon/tiroir.html
CIFR est une solution libre en cours de développement, nous travaillons sur le projet durant notre temps libre, donc ça avance vraiment doucement et il reste beaucoup de choses à régler, mais si jamais le projet vous emballe, nous serions vraiment curieux d’avoir des retours, ou des encouragements !
(Genre “wouah c mortel lé gars continué comme sa !”)
Description du système CIFR
Pour que tout le monde comprenne bien de quelle manière fonctionne le core de cifr, je vais essayer d’expliquer (et je vous invite à me corriger si je me trompe ou si je formule mal quelque chose) chaque étape de la transformation.
L’origine de CIFR part d’un besoin simple, qui est de pouvoir utiliser, à l’identique, une police complexe, qui ne peut être reproduite avec les solutions actuelles (@font-face, cùfon, flir, etc…), et ce, dynamiquement.
Exemple, cette police à effet métallisé ne peut pas être reproduite fidèlement avec les solutions actuelles ::
Et bien, avec CIFR, c’est possible.
Le principe de CIFR se base sur la technique des sprites CSS.
La transformation se fait via php ou javascript, qui convertit le texte en code html et css.
Cela signifie que cifr peut fonctionner totalement sans javascript, qu’il peut également fonctionner totalement sans php, et qu’il peut même fonctionner sans php ni javascript, si on génère le code manuellement grâce à un outil online que nous proposerons.
CIFR s’adresse surtout aux designers, qui souhaitent pouvoir aller plus loin dans le détail, la finesse, et la fidélité de leur police.
qui aiment avoir la main sur chaque pixel, sur chaque propriété css sans avoir à mettre le nez dans un code javascript obscur.
Avantages
- Liberté graphique totale
- Fidelité de rendu absolue
- Légalité : respecte les licences d’utilisation des polices commerciales (contrairement à @font-face, Typeface et Cùfon)
- Lourdeur : consommation CPU, exécution côté client, temps d’affichage
- Accessibilité : support par les lecteurs d’écrans, que javascript soit activé ou non
Inconvénients
- Souplesse : Si vous souhaitez utiliser une police dans plusieurs couleurs, avec une variante italique, et bold, il faut créer une sprite et une css pour chacune des versions
- Rapidité de mise en place : avec cùfon on convertit la police en js, on insère le tout dans la page et hop c’est près. Avec CIFR, il y’a un peu plus d’étapes avant d’avoir quelque chose d’opérationnel.
Il est mis à disposition un fichier psd, qui contient un tableau de caractères (basé sur le standard ISO 8859-15). L’intérêt de ce tableau est que les caractères sont codés sur 2 octets, et donc il est possible de représenter un caractère via une coordonnée xy.
Ce qui serait impossible avec l’utf8, codée sur 4 octets.
Attention, cela ne veut pas dire que CIFR est codé en ISO 8859-15, il se sert juste de ce standard pour représenter un tableau graphiquement parlant, mais en bien codé en UTF-8.
Par contre, il n’affichera que les caractères ISO 8859-15 (il serait bien trop lourd de devoir générer une sprite en UTF-8).
Voici le fichier psd en question : http://www.maximelebreton.com/labs/cifr/cifr_psd_sprite.zip
Cette sprite est composée de cellules de 100 x 100 px.
(Car une police de caractère dépasse très rarement les 100px.
Mais cela veut dire que si vous souhaitez utiliser une police avec une taille supérieure à 100px, la sprite d’origine et la css fournie ne fonctionnera pas.
Par contre, vous pouvez tout à fait l’adapter pour vos besoins, au niveau du noyau (php ou javascript), cela ne change rien.)
Il est donc ensuite très simple de cibler une lettre via une background-position.
Exemple :
la lettre b est codée 62.
Le sens de lecture du tableau est de y, puis x (ne me demandez pas pourquoi, je l’ai signalé dans la discussion concernant l’article de wikipedia).
y6 et x2 valent sur le tableau -600px et -200px.
donc b = background-position:-200px -600px; (en css, le sens de lecture est de xy)
Pour afficher cette lettre, je créé donc un span avec une classe .iso_62 qui contient la background position citée plus haut.
Maintenant, il faut automatiser la transformation d’une lettre, en utilisant php ou javascript.
Et en voici les étapes :
- Une fonction récupère le texte (brut ou html) à convertir.
- Une boucle passe sur chaque caractère, et la stocke dans un tableau
- Une regex détecte si c’est du code html ou non
- Chaque lettre est englobée dans un span.iso_xx, et chaque mot dans un span.word, le tout dans un span.cifr qui porte la classe de la police utilisée. Exemple span.cifr.arial-14px