D’habitude, je range ce genre d’informations dans un billet en vrak mais comme chez Facelift, on m’a gentiment et rapidement répondu dès que j’ai eu un problème, je récompense le travail et le dévouement du développeur (car il est seul en fait) en consacrant un billet à part entière à son projet (ça doit lui faire une belle jambe mais bon).
Avant de vous expliquer à quoi sert Facelift, mettons nous en situation… Actuellement, seules quelques polices standards peuvent être utilisées sur le Web car elles sont communes à tous les systèmes d’exploitation et garantissent que le site sera visible de la même façon, quel que soit l’environnement. Ces polices sont listées sur cet article Wikipédia. Comme vous voyez, elles ne sont pas nombreuses et pas très originales… De temps en temps, les designers aiment utiliser des polices un peu exotique pour styliser certains éléments textuels (les titres généralement) et c’est là que ça devient chiant à gérer pour les pauvres petits intégrateurs que nous sommes. Plusieurs solutions se présentent à nous :
* Afficher une image en arrière plan et cacher le texte via la propriété CSS text-indent: -9999px (ce qui va décaler le texte super loin donc on ne le voit plus). Ce n’est pas une bonne solution car si les titres changent, on est bon pour refaire les images.
* Utiliser sIFR qui remplace les titres dynamiquement (via JavaScript) par un fichier SWF. C’était la meilleure solution jusqu’il y a peu (avant que je ne découvre Facelift) mais par expérience : c’est très lourd, ça marche de façon aléatoire et ce n’est très peu flexible au niveau style. Autrement dit, au moins je dois utiliser cette chose, au mieux je me porte…
Même si un projet relativement jeune et porté par un seul développeur (qui doit faire ça après le boulot), Facelift me semble être beaucoup plus pratique et prometteur que sIFR. Au contraire de ce dernier, Facelift génère le contenu de remplacement côté serveur, en PHP. Ca peut sembler être un inconvénient mais c’est pour moi un avantage car ça garantit que le titre sera affiché de la même façon dans tous les navigateurs. Il suffit de l’initialiser en deux lignes de JavaScript et Facelift va générer les images très rapidement avec les styles définis dans vos fichiers CSS. La mise en cache permet d’améliorer encore les performances.
Pour ces quelques raisons, je vous recommande donc l’utilisation de Facelift et de foutre ce bon vieux sIFR à la poubelle. Allez jeter un oeil aux démos pour vous en convaincre définitivement…
La bonne nouvelle, c’est que des outils comme sIFR et Facelift vont disparaitre peu à peu car on pourra bientôt afficher n’importe quel police dans les navigateurs via CSS (version 3) et son module Web Fonts. J’y reviendrai certainement dans un prochain billet mais sachez que c’est déjà implémenté dans Safari, Opera et Internet Explorer 8. Patience donc… (plus que 10 ans à tenir)
Merci à Ced pour le tuyau 😉
Le blog de Vincent Battaglia 
Ah ! J’avais commencé a développé un truc identique ! Mais j’ai jamais eu le courage de le faire avancer (puis j’suis limite en php hein ^^). Alors je dis merci à toi et à Facelift. Je me le garde au chaud 🙂
LikeLike
Vraiment très intéressant, merci pour l’info !
Par contre, même si cela reste parfaitement non obstrusif, pourquoi avoir besoin de javascript à chaque affichage de page (même s’il y a un système de cache c’est le JS qui permet d’obtenir l’image) ? Pourquoi le webmaster ne pourrait-il pas générer les images via PHP quand un nouveau titre est nécessaire (modif ou ajout) et insérer les images dans une balise de titre (avec texte alternatif sur l’image bien sûr)? Bien sûr cela ajoute une étape de travail pour le concepteur du site mais intégré à un framework maison cela pourrait tout à fait être automatisé.
Je comprends bien que ce soit une solution toute prête et facile à mettre en œuvre qui est mise à notre disposition, mais au niveau performance et accessibilité (dans ce cas ci c’est déjà très bien mais si le but est d’offrir le même rendu au plus grand nombre, aussi ceux sans JS…) y a moyen de faire encore un peu mieux. J’ai zappé quelque chose ?
LikeLike
Le JavaScript va se charger de remplacer ce que tu lui passes en paramètre (h1 par exemple) par l’image générée via PHP. Si tu n’as pas JavaScript activé, tu vois le titre avec une police “normale”. C’est moins joli mais ça reste lisible et accessible.
Il n’y a donc absolument aucun problème si tu n’as pas JavaScript.
Pourquoi le webmaster ne pourrait-il pas générer les images via PHP quand un nouveau titre est nécessaire ?
Parce que c’est beaucoup de boulot… Imagine que tu as un site de 100 pages en 10 langues. Les images peuvent être générées via un script (donc c’est rapide) mais après tu dois les linker dans tes CSS et ça, c’est une autre histoire…
LikeLike
Pas mal 🙂
A savoir que Spip intègre déjà depuis longtemps un tel système (http://www.spip.net/fr_article3325.html), avec quelques effets en bonus (on peux y appliquer tous les filtres d’images de Spip quoi).
LikeLike
Au pire, on peut aussi utiliser une image directement du genre imgTitre.php?text=le super titre mais niveau sémantique c’est moyen
LikeLike
Pas mal du tout…. surtout pour les devices qui supportent pas encore le flash (iPhone). Mais dommage que le texte ne peut pas être sélectionné contrairement à sIFR.
LikeLike
Oui, pas mal, mais bon une requête AJAX et du temps de processeur pour avoir un beau titre,… je reste encore dubitatif.
C’est déjà mieux que du sIFR (parce que ce n’est pas du Flash), les liens ont un comportement correct de liens (ctrl+click sur FF ouvre un nouveau tab par ex) mais vraiment comme tu dis vivement les vraie webfonts (déjà dans Webkit et Opera?)
les WEFT marchent deja depuis un bout de tmps sur IE mais c’est pas vraiment utilisable.
Bref, on aura encore du boulot.
Surtout que les fonderies ne vont pas des masse apprécier que leurs fontes soient distribuées comme ca sur internet…
Ca promet 🙂
LikeLike
A ce sujet, voir la direction dans laquelle Microsoft compte s’engager: http://blogs.msdn.com/ie/archive/2008/07/21/font-embedding-on-the-web.aspx
LikeLike
Bonne nouvelle, parce que sIFR est parfois assez chatouilleux. Par contre avec Facelift, je galère un peu avec les chemins à préciser dans le fichier config-flir.php et le flir.js (oui, je suis assez blonde en été ^_^v )
J’ai mis le dossier à la racine de mon thème. Pourrais-tu me donner les valeurs que tu as mises ? Merci d’avance 🙂
LikeLike
J’ai aussi essayé ce système.
Sur mon EasyPHP en local pas de problème, mais gros galère pour le faire fonctionner sur un serveur distant.
je désespère pas ! Je cherche juste à rendre la fiche de personnage de mon jeu, un peu plus lisible ^^
kéké
LikeLike