Début de la traduction (article d’origine ici)
[edit du 08/04/05 : petites corrections, merci Bertrand !]
L’application de styles à du texte est la première cause de migraine du webdesigner. Seule une poignée de polices sont disponibles universellement, et les effets visuels sophistiqués sont quasiment impossibles à réaliser en utilisant uniquement le couple CSS/HTML standard. Se contenter des polices traditionnelles pour le corps de texte est intelligent, mais quand on en vient aux titres, de courts blocs de texte destinés à attirer l’attention, il serait agréable d’avoir plus de choix. Nous nous sommes habitués à ce problème et le contournons en utilisant au maximum de leur potentiel le peu de polices à notre disposition, ou en remplaçant entièrement nos titres par des images.
La plupart des sites qui remplacent le texte par des images le font avec des images faites à la main, ce qui n’est pas si terrible quand il y a un petit nombre de titres, mais qui devient vite ingérable sur un site mis à jour plusieurs fois par jour. Quelle que soit la manière dont le remplacement est fait, chaque image a besoin d’être liée au texte qu’elle remplace. Cette liaison se manifeste généralement sous la forme d’un tag <img>, une feuille de style intégrée, ou un attribut id idoine. Et avec le temps, au travers de changements de mise en page, de refontes, cette liaison doit être gérée par quelqu’un.
Nous pouvons oublier ces âneries. Plus de tag <img> ou <span>, plus d’attribut id ou de temps perdu dans Photoshop, et plus de hacks CSS qui font désordre. En utilisant JavaScript et PHP, nous pouvons générer des titre-images accessibles avec n’importe quelle police de notre choix. Et nous n’avons pas besoin de changer la structure de notre HTML ou de notre CSS !
Visualisez la démo pour voir le Remplacement Dynamique de Texte en action. Puis lisez la suite pour découvrir comment ajouter cette fonctionnalité à votre site.
PHP
Ce petit script PHP (disponible ici) livrera une image PNG dynamique à notre navigateur à chaque fois qu’on lui demandera. Avant de le mettre en application, cependant, nous devons le personnaliser pour notre application spécifique. C’est le but des 7 premières lignes du script :
$font_file = 'font.ttf' ; $font_size = 56 ; $text_color = '#ffffff' ; $background_color = '#000000' ; $transparent = true ; $cache_images = true ; $cache_folder = 'cache' ;
- la variable
$font_filedoit être remplie par le chemin local (pas l’URL) d’une police TrueType (TTF) ou Open Type (OTF) sur votre serveur web. C’est la police qui sera utilisée pour la création de vos images; vous devrez la télécharger sur votre serveur depuis votre ordinateur. $font_size, et ce sans surprise, se réfère à la taille de la police en points.$text_coloret$background_colorsont les codes couleurs hexadecimaux qui indiquent respectivement la couleur du texte et celle du fond de l’image.- Quand
$transparenta pour valeurtrue, les bords du texte de l’image seront mélangés/fondus avec la couleur de fond afin d’empêcher l’anti-aliasing, et la couleur de fond réelle sera entièrement invisible. - En définissant
$cache_imagescommetrue, et$cache_foldercomme le chemin local vers un répertoire accessible en écriture sur votre serveur web, ce script enregistrera chaque image qu’il créée, les conservant pour une utilisation ultérieure. Ceci peut considérablement accélérer l’affichage des images pour vos visiteurs, et se révèle particulièrement important sur des serveurs partagés ou connaissant un fort trafic.
Pour installer ce script, téléchargez-le sur un serveur web configuré avec le support du PHP. Pour être plus précis, il vous faudra la version 4.3 ou supérieure de PHP, compilée avec le support de la librairie graphique GD, 1.6 ou supérieure. Si tout cela ne vous parle pas, envoyez par e-mail ces spécifications à votre hébergeur et il vous fera savoir si votre serveur est compatible.
Edit du 24 avril 2005 (merci Bebop !) :
NB : Pour ces dernières versions récentes de la librairie GD, il faut ajouter “./” au début du chemin de la police.
Ce qui donne :
$font_file = './font.ttf';
au lieu de
$font_file = 'font.ttf';
Bien que nous ayons utilisé PHP pour construire les images dans cette implémentation, votre site n’a pas besoin d’utiliser activement le PHP pour tirer parti de cette technique. Quelle que soit la manière dont vous générez vos pages HTML, qu’elles soient éditées à la main ou à travers un CMS, vous pouvez utiliser cette technique tant que vous insérez un tag <script> dans la partie <head> de vos documents. J’expliquerai ce point plus en détail ci-dessous.
Veuillez noter que ce qui peut être fait avec PHP peut souvent être fait avec d’autres outils. Perl, ASP, Java servlets, et d’autres langages de programmation serveur seraient aussi de bons candidats pour la génération d’images personnalisées. PHP est un choix excellent grâce à sa grande disponibilité, son indépendance à la plateforme utilisée, et un apprentissage facile. Considérez des alternatives si vous avez besoin de quelque chose que PHP ne peut vous fournir ou si vous choisissez de créer votre script de génération d’image à partir de zéro. Il serait sûrement plus simple, cependant, de simplement adapter le code PHP présenté ici.
Une chose que notre personnalisation du script n’inclut pas est le texte qui doit être utilisé pour la génération des images. C’est parce que le texte que nous utilisons pour générer les images sera passé au script via son URL. Par exemple, charger l’URL heading.php?text=Les%20URLs%20Sont%20Fun retournera une image représentant “Les URLs Sont Fun”. Et elles le sont ! Mais nous n’aurons pas besoin d’écrire les URLs nous-même puisque le JavaScript s’en chargera pour nous.
JAVASCRIPT
Téléchargez le fichier source JavaScript ici.
Cette technique emprunte beaucoup de la méthode de Remplacement des Images par Javascript (JIR) de Peter-Paul Koch. Le principe de base de JIR est très simple. Beaucoup de codeurs de CSS exploitent des bugs de navigateurs pour cacher des styles CSS à ces navigateurs. Ces hacks sont proches de déclarations conditionnelles dans leur code, transformant les CSS en un langage de programmation assez brut. Plutôt que d’utiliser ce « langage-des-bugs », Koch et d’autres ont avancé l’idée que JavaScript, un vrai langage de programmation, pouvait effectuer la même tâche de manière plus intelligente et accessible. C’est merveilleux pour notre démarche, car JavaScript apporte aussi plus de flexibilité. Plus précisément, nous l’utiliserons pour remplacer le texte par des images qui n’existent même pas encore.
Quand la page est chargée pour la première fois, le script essaye de charger une petite image (1×1 pixels) de test (téléchargez un exemple ici). Si ce test fonctionne, on peut en conclure que le navigateur du visiteur est capable d’afficher des images, sinon il n’aurait pas gâché de bande passante à la télécharger. C’est le cœur du fonctionnement de JIR. En testant le support des images, nous pouvons immédiatement déterminer si nos visiteurs ont besoin de titres stylisés ou non. Si non, le script s’arrête à cet endroit.
Partant du principe que le navigateur prend en charge les images, donc, le script attend que la page soit entièrement chargée, parce qu’il ne peut remplacer du texte qui n’a pas encore été téléchargé. Une fois que le HTML est complètement chargé, notre script va chercher les éléments spécifiés (<h2>, <span>, etc.) et remplacer le texte qu’ils contiennent par un tag <img>. Ce tag <img> dynamique a pour attribut alt le texte d’origine, et comme attribut src l’URL du script PHP que nous avons installé. Le script PHP renvoie alors une image PNG personnalisée, et voilà : des titres personnalisés !
Pesant un bon 8Kb, il se passe beaucoup de choses dans ce coin du ring, mais il n’y a en fait que deux lignes à modifier pour que le script fonctionne :
replaceSelector(&quot;h2&quot;,&quot;heading.php&quot;,true); var testURL = &quot;test.png&quot;;
La fonction replaceSelector accepte trois paramètres : le premier est le sélecteur CSS qui indique quels éléments doivent être remplacés. Ce sélecteur peut être presque n’importe quel sélecteur CSS valide, id, class, sélecteurs d’éléments et d’attributs inclus.
Le deuxième paramètre est l’URL de notre script PHP.
Le troisième paramètre est une valeur vrai/faux (true/false) qui indique si le retour à la ligne automatique doit être activé pour ce remplacement. Quand ce paramètre a pour valeur true, les titres sont séparés en plusieurs images, une par mot. Quand il vaut false, une image unique est générée pour chaque titre.
replaceSelector devrait être appelée une fois pour chaque groupe d’éléments que vous voulez remplacer par une image personnalisée. Les URL de ces lignes peuvent être absolues (http://...) ou relatives à votre fichier HTML (chemin/nomdefichier).
La variable testURL doit être définie par l’URL de votre petite image (1×1 px) de test.
Une fois que ces lignes sont correctement paramétrées, vous pouvez télécharger le fichier JavaScript sur votre serveur web, et l’appliquer à vos pages en ajoutant la ligne suivante dans le <head> de vos documents.
&lt;script type=&quot;text/JavaScript&quot; src=&quot;replacement.js&quot;&gt;&lt;/script&gt;
Assurez-vous que l’attribut src dans cette ligne pointe vers l’endroit où vous avez placé votre fichier JavaScript.
C’est tout ce qu’il est nécessaire de faire pour que le Remplacement Dynamique de Texte fonctionne, nous pouvons donc nous arrêter là si nous le souhaitons.
Mais il existe quelques améliorations que nous pourrions mettre en place pour aller plus loin.
Versions Imprimées
Comme vu auparavant sur ALA, beaucoup de sites emploient dorénavant des feuilles de styles spécifiques à l’impression afin d’offrir à leurs visiteurs de meilleures versions papier de leur contenu. Dans beaucoup de cas, ceci implique d’inverser le processus de remplacement des images afin que la version imprimée d’une page utilise les polices réelles plutôt que des graphiques, qui ont souvent un mauvais rendu sur les imprimantes hautes résolutions. Malheureusement, JavaScript ne peut résoudre ce problème. Une fois que nous avons remplacé notre texte par une image, il est impossible d’inverser ce processus spécialement pour l’impression, et nous devons donc trouver une autre solution.
Au lieu d’essayer d’inverser notre processus de remplacement, nous pouvons planifier un peu à l’avance. En plus d’insérer un tag <img> dans nos titres, nous pouvons aussi insérer un tag <span> qui contient le texte de titre d’origine. Et nous pouvons donner à l’attribut display la valeur none, afin que le <span> ne soit pas affiché à l’écran. Maintenant nous avons deux copies de notre texte d’origine. Une dans une image visible, l’autre dans un span caché. En donnant à chacun de ces éléments des attributs class identifiables (“replacement” et “print-text”, respectivement), et en ajoutant une feuille de style spécifique à l’impression, nous pouvons interchanger leurs propriétés d’affichage à l’impression.
La feuille de style suivante (télécharger un exemple ici) pourrait être utilisée pour générer une version imprimée appropriée de votre page :
span.print-text { display: inline !important; } img.replacement { display: none; }
Une fois que nous avons téléchargé cette feuille de style sur notre serveur web, nous avons seulement besoin de changer deux lignes dans notre JavaScrit pour la rendre fonctionnelle :
var doNotPrintImages = false; var printerCSS = &quot;replacement-print.css&quot;;
En donnant à la variable doNotPrintImages la valeur true, et à printerCSS la valeur de l’URL de notre feuille de style, le script insèrera automatiquement le tag <link> approprié dans le <head> de notre document.
Sans clignotement
Comme notre script ne peut commencer à remplacer les éléments qu’une fois le document entièrement chargé, il y aura souvent un flash rapide de contenu non stylisé pendant que navigateur attends que le processus de remplacement commence. C’est moins un problème qu’un inconvénient mineur, mais comme il est possible d’y échapper, autant y remédier. Avec l’aide d’une autre petite feuille de style, nous pouvons faire précisément cela.
Avant que le corps du document ne commence à être chargé, nous pouvons dynamiquement insérer une feuille de style qui cachera entièrement ces éléments. Comme les feuilles de style sont appliquées au fur et à mesure que le document est rendu, aucun contenu ne sera visible pendant cette période. Une fois que notre technique de remplacement a fini de s’exécuter, nous pouvons neutraliser cette feuille de style, et nos titres fraîchement stylisés seront à nouveau visibles.
Par exemple, si votre page était paramétrée pour remplacer les tags <h2>, la feuille de style suivante (disponible ici) les cacherait jusqu’à l’achèvement de notre technique de remplacement :
h2 { visibility: hidden; }
Cependant, il y a un léger problème avec cette approche. Notre technique entière dépend du chargement d’une image de test afin d’indiquer si le navigateur supporte ou non les images. Si l’image ne se charge pas, notre technique ne sera jamais activée. Et si notre technique n’est pas activée, la feuille de style qui cache nos titres non stylisés ne sera jamais neutralisée. A cause de cela, les visiteurs qui ont désactivé le support des images dans leur navigateur, mais qui peuvent quand même utiliser JavaScript et les CSS, ne verront rien d’autre qu’un espace vide où nos titres auraient dû se trouver.
Nous améliorerons l’expérience de navigation déjà difficile de cette minorité en ajoutant une valeur d’arrêt minuté au script. Si l’image de test n’a pas été chargée avec succès après une ou deux secondes (ou après la durée que vous souhaitez), le script neutralisera automatiquement cette feuille de style et les titres apparaîtront. Ces une ou deux secondes sont un dérangement léger pour ces personnes exceptionnellement rares, mais cela résout le problème de clignotement pour les autres 99,99% de nos visiteurs. Le plus important est que nous maintenions l’accessibilité pour tout le monde.
Pour permettre cette personnalisation (optionnelle), et pour enlever le bref flash de contenu non stylisé, vous devez éditer trois lignes dans le fichier JavaScript :
var hideFlicker = false; var hideFlickerCSS = &quot;replacement-screen.css&quot;; var hideFlickerTimeout = 1000;
Donnez comme valeur true à la variable hideFlicker et l’URL de votre fichier CSS à la valeur hideFlickerCSS.
hideFlickerTimeout devrait avoir pour valeur le nombre maximum de millisecondes (c-à-d : 1/1000 seconds) que le script doit attendre avant de neutraliser cette feuille de style.
Notes et Suggestions
Certaines versions plus anciennes de Mozilla, Netscape 6.2 inclus, contenaient un bug qui déclenchait le chargement des images même si l’utilisateur avait indiqué de ne pas les afficher. C’était bien entendu une aberration et fût fixé dès la version 1.4. Même si cette technique devrait normalement fonctionner sans problème dans ces navigateurs, le script ne diagnostiquera pas correctement le support (ou non) des images et échouera quand les visiteurs utilisant ces navigateurs auront désactivé le support des images. Je ne considère pas qu’il s’agisse d’une occurrence suffisamment fréquente pour être un inconvénient sérieux, mais il faut le noter par souci d’exhaustivité. Il n’y a pour l’instant aucun contournement à ce problème.
Utilisez cette technique avec un service de traduction, comme ceux de Google ou Altavista. Tant que votre police supporte les caractères étrangers, les images dynamiques seront traduites aussi. Le texte que vous remplacez n’a pas besoin d’être dans un tag de titre (<h1>, <h2>, etc.) ; il peut être dans n’importe quel élément de la page. Avec l’aide de quelques ajustements assez simples, et des manipulations des valeurs de float, cette technique pourrait créer des lettrines dynamiques pour chaque paragraphe auquel vous l’appliquez.
Vous pouvez aussi remplacer vos tags <a>, et offrir à votre page des hyperliens stylisés, quoique faire fonctionner des rollovers demande plus de personnalisation.
Au lieu de remplacer du contenu par des tag <img> générés dynamiquement, cette technique pourrait totalement éviter l’utilisation du PHP et insérer des animations Flash dynamiques à la place.
Remerciements
Peter Paul Koch, pour sa technique de Remplacement des Images par JavaScript.
Simon Willison, pour sa fonction getElementsBySelector.
Stuart Langridge, pour ses Techniques JavaScript Discrètes.
—
Traduit avec la permission de A List Apart Magazine et l’auteur. Translated with the permission of A List Apart Magazine and the author.
101 réponses à cet article
# - - bdbus -
# - - Thom -
ça n’aurait pas ça place sur pompage.net ça ?
en tout cas bravo pour l’usage de ta responsabilité en tant qu’utilisateur de logiciels libres :p
# - - bat -
si si Thom, pompage.net et pi un petit link sur alistapart.com accessoirement aussi
J’imagine dans une nouvelle ligne du paragraphe "Translations" de l’article ! Bravo Marie ! 
# - - Marie ALHOMME -
Voilà, tout à fait Bat ! J’ai écrit à Pompage, j’attends leur réponse. Pour ALA, Stewart a envoyé un mail à Jeffrey Zeldman pour que le lien soit ajouté !
« En tout cas », merci des commentaires !
Je vais voir si il y a possibilité d’en traduire d’autres !
# - - Thom -
J’ai essayé ! c’est simple, pratique, joli et les explications étaient limpides : en un mot comme en cent, "merci" !
# - - Marie ALHOMME -
Bonjour Thom !
Merci de ton commentaire, je suis ravie d’avoir pu « t’aider » !
Je ne vois pas d’exemple sur le site que tu donnes, où peut-on en voir ??
En tout cas, « de rien », merci de ta visite, et bonne continuation !
# - - Lunatix -
Fort pratique , joli , bref merci beaucoup .
Je vasi de ce pas faire quelque modif sur mon site
J’avais lu quelque chose de similaire ici =>
http://axisfive.net/aboutsiir/
# - - IZO -
Bonjour et un grand merci pour cette traduction. Mais je n’arrive pas à avoir d’image sur mon serveur interne (php 4, mac os x) et sur mon site (OVH)
J’ai testé à firefox et safari.
http://www.aucuneid.net/
C’est peut etre une histoire de police ?
# - - Marie ALHOMME -
Bonsoir IZO !
Je suis désolée que ça ne marche pas du premier coup pour toi !
Je ne te répondrai pas « aucune idée »…
mais presque !
Le script PHP décrit une erreur quand il rencontre une, donc j’imagine que ça ne vient pas de là… es-tu sûr que l’image de test pour le javascript est correcte ? (je constate à l’instant que ta page de test n’a pas de DOCTYPE, as-tu vérifié si cela changeait quelque chose ?)
En fait, sans plus d’éléments c’est vraiment pas évident… Ecris-moi sur mon e-mail si tu veux qu’on en discute plus avant !
Merci encore de ta visite et de ton commentaire !
> Lunatix, merci de ta visite, et pour le lien (que je connaissais et qui est effectivement intéressant, mais certains points soulevés dans les commentaires méritent d’être corrigés avant que les deux méthodes soient aussi bonnes l’une que l’autre, AMHA) ! J’aime beaucoup le « début » de ton site, tiens-moi au courant quand tu auras mis le RDT en place (et le reste du site aussi…) !
# - - Thom -
> Marie : ouais normal, c’est encore en phase de test !
(en exclu : http://www.pafpaf.org/rubrique.p...
> Izo : je confirme que ça passe très bien chez OVH, t’as essayé d’appeler heading.php?text=Les%20URLs%20Sont%20Fun en test ? ça donne quoi ? sinon peut-être as tu mal renseigné les adresses absolues côté serveur ?
# - - man machine -
Que dire .. merci pour ton temps .vraiment utile ce petit article . fini les pertes de temps a editer des Titre a la chaine sous toshop.
merci !
# - - IZO -
Merci à tous pour vos reponses mais en fait j’avais une erreur à la ligne 88 du fichier heading.php.
Il y avait : c’est l’apostrophe : " Le serveur n’ a pu crÈer cette image-titre."
qui pose probleme donc je l’ai enlevé.
# - - Marie ALHOMME -
Arf, mea culpa c’est ma faute ça !! je corrige de suite ! y’en a d’autres comme ça ??
Ravie que ça fonctionne pour toi maintenant en tout cas !
# - - Lunatix -
Marie Alhome "J’aime beaucoup le "début" de ton site, tiens-moi au courant quand tu auras mis le RDT en place "
Merci beaucoup =]
Je commence a esseyer de tenter de codé quelque chose en php … :-/
Sinon bravo pour la traduction d’habitude je n’arrive jammais a faire marcher ce genre de hack,et la du premier coup tout fonctionne
donc bravo pour la traduction .
Je reproche juste un petit truc c’est la taille de police en point …
A pluche
# - - fleg -
Salut,
Bravo pour la traduction.
Mais la démo marche pas avec mon firefox… En revanche ça fonctionne avec IE…
J’ai pas eu le temps de regarder, mais j’imagine que c’est une histoire de javascript pas "standard"…
# - - Marie ALHOMME -
Bonjour fleg,
Comme tu le dis, il s’agit de « ton firefox », et je ne pense vraiment pas que ton problème vienne de Firefox en général :
As-tu vérifié avec la console javascript de FF pour savoir exactement ce qu’il se passait ? Je te conseille de le faire avant de tirer ce genre de conclusions !
Peut-être qu’il ne s’agissait que d’un problème de cache ? Bref, je te suggère d’étendre tes tests et de nous tenir au courant !
En tout cas, merci de ta visite, j’espère que tes problèmes seront rapidement résolus !
# - - Bebop -
Merci pour cette traduction, j’avais déjà lu cet article sur ALA mais sans jamais avoir réussi à faire fonctionner cette technique. Malheureusement c’est encore le cas, mais bon je vais en profiter pour poser des questions là.
Je n’arrive même pas à passer le petit test des URLs qui sont fun. J’ai droit à ce message dans une image:
Erreur : le serveur n’a pu créer cette image-type.
Je suis chez Celeonet avec php 4.3.10 et si je lis bien les informations techniques, il y aussi la librairie GD version 2.0 avec le support du PNG.
Je comprend pas du tout pourquoi cela ne marche pas. Aurais tu une idée ?
# - - Marie ALHOMME -
Bonjour Bebop !
As-tu fait un « phpinfo » ? Un fichier phpinfo.php contenant le code suivant :
ou encore mieux :
?
Vérifie aussi auprès de ton hébergeur directement, parce que cette erreur est affichée par le script php lorsqu’il lui est impossible de créer une image, mais pas que la librairie gd est indisponible (il y a une erreur spécifique pour cela). Copie-colle leur le code du script peut-être ?
Bref, pas d’autres suggestions à te faire pour l’instant, désolée que cela ne marche pas directement pour toi, même si c’est assez normal que ça ne marche pas toujours partout du premier coup (il n’y a qu’a voir les forums/commentaires liés à ce genre d’articles…) !!
Tiens-nous au courant !!
A bientôt j’espère !
# - - Bebop -
Ça marche !
J’ai demandé à mon hébergeur. Et il m’a indiqué que pour les dernières versions de GD, il fallait avoir "./" avant la police.
Ce qui donne :
$font_file = ‘./font.ttf’; au lieu
$font_file = ‘font.ttf’;
Il faudrait peut être que tu le précises à la fin de la traduction.
# - - Marie ALHOMME -
Bonsoir !
Je te remercie de cette petite astuce, que je vais me dépêcher d’insérer dans la traduction à l’endroit opportun !
Hâte de voir le résultat !
Reviens bientôt !
# - - niko -
Bonjour,
Tout d’abord un grand merci à toi Marie, car ton site est tout simplement magnifique, très clair, bien pensé et rempli de petites choses éclatantes. Et que dire des articles…. Bref je suis fan.
Pour revenir au sujet, j’ai fait le test et ca marche très bien. Donc bravo car très simple à mettre en oeuvre (c’est vrai que le copier coller ce n’est pas forcément très dur
).
Cependant j’ai un petit soucis en terme de cache. J’ai mis "false" à $cache_images dans le fichier heading.php et laissé par défaut la variable $cache_folder. Lorsque je change la taille de la police, les images png ne change pas sous MSIE. Alors que sous Firefox tout fonctionne à merveille. Pour que la nouvelle taille de police soit prise en compte sous MSIE, il faut que je change le texte à afficher et donc qu’un nouveau png soit crée je pense.
Est ce que qqun à déjà connu ce problème? Pouvez vous me donner votre avis?
Merci et encore bravo.
# - - bubux -
Boujour,
Merci pour cette traduction. Cette astuce m’a l’air excellente mais le problème c’est que je n’arrive pas à afficher les caractères spéciaux et plus particulièrement les accents. J’ai testé plusieurs police qui affiche les accents bien évidemment, mais lorsque le script créer l’image, un rectangle apparaît.
Cela devrait pourtant fonctionner vu que sur ce site les accents sont affiché !
Avez-vous une idée ou est le problème ?
A+
# - - Marie ALHOMME -
Bonsoir Niko !
Merci beaucoup-beaucoup de tes commentaires !!
As-tu essayé de ne rien mettre dans
$cache_folder?Utilises-tu un système de blog type dotclear ? Si oui, as-tu le cache activé ? Si oui, est-ce le même dossier que dans ton script heading.php ?
Et Quelle version de MSIE utilises-tu ?
Que tout fonctionne à merveille sous Firefox ne me surprends guère en revanche…
Les autres, des idées ??
J’espère que tu résoudras rapidement ton soucis, que l’on voit le résultat !!
A très bientôt !
Bonsoir Bubux !
La question m’a déjà été posée, et je me la suis moi-même posée quand j’ai testé cette solution pour la première fois, car il m’est arrivé la même chose lors de tests en local (avec EasyPHP)…
Je me permets donc de te recopier ma réponse, puisque je n’y peux rien ajouter !
Je te conseillerai donc de te renseigner auprès de ton hébergeur ?!
Je ne sais pas si tout ça t’aide ou pas du tout, j’espère que oui, et je suis désolée si non !!! :/
Bonne soirée « malgré tout », tiens-nous au courant… et reviens-vite !
# - - Niko -
Bonjour,
J’ai fait les tests sous Windows 2000 SP4 avec MSIE version 6 et Firefox version 1.0.3.
En effet j’ai également essayé de ne rien mettre dans $cache_folder.
Configuration actuelle :
$font_file = ‘CAREFREE.TTF’ ;
$font_size = 20 ;
$font_color = ‘#000000′ ;
$background_color = ‘#FFFFFF’ ;
$transparent_background = true ;
$cache_images = false ;
$cache_folder = » ;
J’ai également fait un test en mettant en commentaire la partie s’occupant de la vérification de l’existence d’une copie en cache ($hash = md5(basename($font_file) …..) dans le fichier heading.php. Mais le résultat est le même. Soit la hauteur de la police reste inchangée, soit elle change mais est pixelisée. Ce qui indique bien, il me semble, que l’image n’est pas recréee mais reutilisé et desfois juste redimensionnée. Bref frustration.
Je n’utilise pas le blog type dotclear pour ce test. Juste un simple fichier php crée de toutes pièces pour ce test.
Je vais encore essayé deux trois trucs aujourd’hui et je vous triendrais au courant en cas de miracle…
Bonne journée.
# - - Marie ALHOMME -
Bonjour Niko !
As-tu vu que dans ton code tu n’as pas précisé d’unité de taille à ta police (pt par exemple) ?
En effet, c’est le script qui doit changer la taille normalement, pas le navigateur… (je suis même assez surprise que ça marche sous firefox)
C’est peut-être d’ailleurs la seule limitation de ce script, d’être fixe dans la taille de police…
Cela dit ça ne m’avait pas dérangé outre mesure et n’avait donc pas fait de test avec une police sans unité de taille et de redimensionnement « en live »…
Lunatix avait proposé le lien suivant : axisfive.net/aboutsiir/, une autre méthode de remplacement, qui permet elle le redimensionnement mais qui a elle aussi ses limitations propres (surtout au niveau accessibilité si je ne m’abuse)… Peut-être cela te correspondra-t-il mieux ?
Je te laisse tester et revenir vers nous !!
Bonne journée !
# - - B - Blog -
Remplacement dynamique de texte
Je suis quelque peu en retard sur l’information mais Marie ALHOMME a traduit l’article Dynamic Text Replacement de A List Apart.Cette technique permet de transformer du texte en image, dynamiquement, à l’aide de…
# - - Niko -
Bon j’y suis arrivé.
J’ai essayé d’être plus stricte en terme d’écriture sur la taille de la police (pt, …). Pas de changement.
Donc j’ai testé la deuxième méthode (Siir) grace au lien de Marie. Mais cela n’a pas été concluant. Script buggé, … Pas trop mon truc en clair.
Je me suis rabattu alors à nouveau sur la première approche.
J’ai remarqué en parcourant l’article original de Stewart Rosenberger que le fait d’appeler directement le fichier heading.php (par exemple : heading.php?text=VasYFonctionneStp) fonctionnait très bien (MSIE et Firefox). Le changemant de police était bien pris en compte.
Donc c’est un problème Javascript!? (conclusion trop hative? peut être). Cependant j’ai décidé d’attaquer le fichier replacement.js.
En fait c’est tout simple. Dans la fonction replacement(), dans la boucle for sur les tokens j’ai rajouté :
var currentTime = new Date()
et un 3ème parametre (time) à été rajouté à l’url qui suit
var url = items[i].url + "?text="+escape(tokens[k]+’ ‘)+"&selector="+escape(items[i].selector+"&time="+currentTime.getTime());
Comme ca on est sur que chaque appel est différent, et donc on force la création de la nouvelle image.
Bon tout cela est bien entendu à valider (structurellement et fonctionnellement). Mais ca semble faire l’affaire.
Bonne journée.
# - - bubux -
Bonjour Marie
Merci beaucoup pour cette réponse très rapide. J’ai transféré mes essaies sur le serveur et cela fonctionne à merveille.
Merci beaucoup.
A+
# - - Marie ALHOMME -
Bonjour !!
Niko : tu n’as pas peur qu’en coût en bande passante ça soit très élevé ??
Tu nous diras !
Bubux : y’a pas d’quoi, et surtout ravie que ton problème soit résolu !!
Merci encore à tous de vos visites et commentaires,
Bonne journée !
# - - Niko -
Bonsoir,
Oui c’est clair qu’à chaque fois l’image doit être regénérée, alors qu’on pourrait (devrait) s’en passer.
Impasse en vue. Pour le moment tout du moins.
# - - keusta -
Bonjour marie,
merci pour la traduction
merci pour les sources
et merci pour les conseils que tu vas me donner car
j’ai un probleme
j’arrive bien a faire fonctionner le machin
http://www.keusta.net/blog/headi...
mais il ne remplace pas les balises h2 sur mon blog
http://www.keusta.net/blog
alors que j’ai copié le php, le js, la police, ainsi que le png…
As tu une idée du pourquoi du comment que ça marche pas chez moi ??
# - - Marie ALHOMME -
Bonsoir Keusta !
Merci de ta visite et de tes… mercis !
Je suis allé voir ton site, et j’ai l’impression que ça marche maintenant, en tout cas ça en a tout l’air vu « d’ici »… Plutôt cool ! J’espère donc que tu as pu en effet résoudre ton problème, mais peut-être peux-tu nous/me dire ce dont il s’agissait précisément et comment tu l’as résolu ?!
J’espère te revoir bientôt sur le site, bon week-end prolongé !
# - - keusta -
Bonjour Marie,
je n’ai pu résoudre mon problème, je ne vois toujours pas les titres de mes billets changés sur mon blog.
Si je respecte la logique, je devrais voir des images et non du texte, et comme je vois bien les titres de tes rubriques remplacés, je me dis que ce n’est pas mon navigateur (FF 1.3) mais peut-être moi qui est oublié un paramètre à remplir
Merci d’avance pour tes conseils..
# - - Fred -
# - - Ash_Crow -
Merci pour cette traduction très utile
J’ai essayé de la mettre en place sur mon blog (www.tenshisama.stools.net) mais il semblerait que j’aie un problème au niveau de l’affichage des accents
Par exemple le mot "Thème" génère une image ou il est écrit "Th e"
# - - Marie ALHOMME -
Bonjour à tous !!
Désolée d’avoir autant trainer à vous répondre !
Keusta, comme je te le disais, je le vois fonctionner sur ton site… as-tu penser à bien vider ton cache pour les tests ? Comme une nouvelle version (1.0.4) de Firefox vient de sortir, profites-en pour mettre à jour, dès fois… !
Fred, je te remercie infiniment de ton commentaire, et de ton lien plus que flatteur !!
Ash_Crow, ravie que ça fonctionne « bien » pour toi aussi… j’avais eu un problème avec les accents moi aussi, mais uniquement quand j’avais testé en local avec EasyPHP, une fois arrivée sur mon serveur d’hébergement le problème a disparu et j’en ai déduit qu’il s’agissait d’une question de PHP/librairie…
Je n’ai donc pas de solution « toute prête » pour toi, et j’en suis bien désolée…
Tu nous tiens au courant ?
Bonne journée et à très bientôt !
# - - Nicolas -
Merci pour cette astuce trés esthétique !
Je l’ai mise en place sur mon blog et c’est vraiment trés sympa !
# - - Fred -
Après une installation du script sur mon site, j’aurai aimé savoir s’il est possible de rendre le texte, généré en image, cliquable. Je pense peut-être trouver cette sollution auprès d’une personne compétente comme vous et qui utilise dotclear comme moi.
Merci d’avance
# - - Marie ALHOMME -
Salut Fred !
Pour ajouter des liens, il suffit de donner la class choisie à la balise <a> au lieu de la balise <h2> (par exemple) qui la contient !
Comme dans ma sidebar : tous les <h2> remplacés ont la class « special », sauf celui de « Liens et Ressources », qui contient un <a> avec la class « special »…
J’espère que ça t’aide !
À bientôt !
# - - Fred -
# - - Marie ALHOMME -
# - - Fred -
Malgré de nombreux essais je n’y parviens pas. Alors, que se cache-t-il comme code pour la igne ressources et liens le dans la partie sidebar de ton template.php ?
# - - Fred -
Trop super
Après avoir regardé ton code source j’y suis arrivé comme un grand.
J’ai réalisé cela dans le "content" de la page d’accueil, dans la "list" des catégorie et dans le "post". Merci de m’avoir mis sur la bonne piste
# - - Lunatix -
bouhouhohuoh il veut pas marché sous mon blog dotclear alors qu’il marche sur mon site( qui ets surle meme serveur ) .. ;-(
VOus auriez pas une idée ?
# - - keusta -
Yo marie, en fait j’avais pas l’url du png en absolu alors ca chargeait rien du coup… en tout cas encore merci pour la traduction, qui fait gagner un temps précieux :p et merci merci merci pour tes supers conseils lol
# - - Marie ALHOMME -
Bonjour !
Keusta : ravie de voir que tu as résolu ton problème !! Merci de tes remerciements
, je vais en faire d’autre car je pense qu’il y a une réelle demande…
Avez-vous vu des articles sur ALA (ou autre) que vous aimeriez voir traduits ?
Lunatix, je n’ai aucune idée comme ça « à froid » de ce qui ne marche pas chez toi… as-tu vérifié que les urls données dans le script étaient ok, que ton image png de test est bien placée sur le serveur, etc ??
J’espère que tu résoudras rapidement ton soucis, envoie moi un mail si tu veux !!
À bientôt !!
# - - ActionScript :: I share so I am. -
Votre police dans les titres
Regardez les titres de ce blog, ils ont une police particulière ! Comment faire ?…
# - - Matcheux -
Bien vu la traduction. C’est sympa. Le reste du site également.
Au niveau de l’utilisation, je remarque juste un léger problème c’est le temps d’affichage de la page.
En effet, il faut un certain temps pour que php et le serveur génère les images. Ca me parait donc difficilement envisageable sur un site à fort traffic.
D’autres solutions existent non ? En CSS, on peut charger un fichier de polices …
Me trompe-je ?
# - - Marie ALHOMME -
Bonjour !
Merci de votre visite et de votre commentaire !
Il est vrai que sur mon site l’apparition est un peu lente, cependant il faut savoir deux choses très importantes :
On peut donc facilement conclure que les conditions ne sont pas optimales, et reléguer cette solution à des petits sites ne me parait pas justifié : sur un site dont l’hébergement est adapté, et qui a donc à sa disposition la puissance des serveurs au lieu de devoir la partager, le « problème » ne dervait pas en être un du tout !
Quand à votre solution css de chargement de fichiers de polices, j’avoue ne pas être au courant !
Quelqu’un sait ?
A bientôt et encore merci d’être passé !
# - - Lunatix -
Si je me souvien bien le chargement de fichier de police externe est dans les spec css3 .
Mais on a le temp de voir venir
( reve toute les nuit de border radius et multi collum)
# - - keusta -
je sais deja ce que je vais te faire traduire !!!
un post sur les remplacement d’images par un gif de chargement..
j’ai plus l’url la mais je vais le retrouver…
# - - ludo -
Bravo Marie pour ton site tout joli et particulièrement interessant.
bon ben voilà je dois l’avouer apres lecture, relecture et rerelecture du post et des commentaires, je n’y arrive pas ! *red* je suis pas doué !
le test avec l’url marche parfaitement.
Moi j’ai cette erreur là qd j’ainclue le ficheir heading ds mon template (essayé aussi ds l’index) de dotclear :Warning: Cannot modify header information – headers already sent by (output started at /home/iludot/www/index.php:50) in /home/iludot/www/heading.php on line 148
et la ligne 148 c celle là : " header(‘Content-type: image/png’) ;"
ca dit quelque chose à qq’un , j’ai raté quelque chose ?
merci d’avance de ton aide et encore bravo !
# - - Marie ALHOMME -
Bonjour !!
Lunatix : je crains effectivement qu’il nous faille encore un peu (beaucoup) de patience… mais qu’est-ce que ça va être BON !!
Keusta : je ne crois pas connaître cet article (je ne comprends pas bien le sujet que tu évoques), mais j’attends ton url avec impatience pour voir ça et, peut-être, le traduire !
Ludo : tout d’abord merci de ta visite et de tes commentaires !
il ne faut pas inclure le fichier heading.php dans ton template, ça va forcément poser problème ! Si tu re-regardes l’article, tu constateras qu’il faut en fait insérer le code suivant dans la balise <head> de tes pages :
Normalement, tout devrait rentrer dans l’ordre !
Tiens-nous au courant !!
Bonne fin de week-end et bon début de semaine à tous !
# - - bob -
Très beau billet , bravo
Cependant, pour ajouter mon petit problème, il n’y a pas de changements dans les balises de mon blog (DC 1.2.1)
Le heading marche bien : bobochan.free.fr/blog/the…
Mais sur mon blog on ne voit aucune différence, pourtant j’ai bien appelé le script de le head du template.php de mon theme
Et dans le script j’ai mis h2 comme id a remplacer
Je vois pas le problème là :/
# - - Marie ALHOMME -
Bonjour Bob !
Désolée de ne pas t’avoir répondu plus tôt… et un grand merci de ta visite et de ton commentaire !!
En regardant le code de ta source, je vois que le fichier est appelé directement alors que le lien que tu montres a bien …themes/default/… dedans ! Je pencherai donc pour un problème de chemin : si ton fichier heading est bien placé comme il le devrait dans ton dossier themes, et ça a l’air d’être le cas puisque l’url de test que tu donnes fonctionne, je te conseille d’aller voir ce que tu as dans ton fichier replacement.js :
replaceSelector("h2","/themes/default/heading.php",true);devrait être ce que tu vois (à peu de choses près)…
Je soupçonne que ce ne soit pas le cas ! Il faut en effet préciser le chemin ABSOLU du fichier pour que cela fonctionne (surtout sous DC si j’ai bien compris) !
Voilà, j’espère que ça résoudra ton problème… tu nous tiens au courant ??
Bonne journée, à bientôt !
# - - keusta -
Coucou marie, je reviens à la charge avec un ptit truc à traduire sur les Dynamic graphics: The bitmap canvas.
http://www.whatwg.org/specs/web-...
Je suis sur que ca sera utile pour la communauté :p
bonne journée !
# - - ndoto -
je hais le clignotement du block central c’est carrement lourd .bon a part ça chouette l’article. mais le trick du fond de page qui s’oppacifie pour te permettre une meilleur lecture enfin je suppose ce vraiment pourri deux trois fois que je tombe la dessus ca fémal au yeu :-C
# - - Marie ALHOMME -
Bonjour ndoto,
tu n’as p’as l’air d’humeur très positive, mais on ne t’en tiendra pas rigueur !
… Après tout l’apparence du blog est secondaire, c’est surtout son contenu qui doit être intéressant (tu peux donc toujours désactiver la feuille de style (ou appliquer une à toi) si tu veux…) !
Désolée que certains aspects du design de mon site ne te conviennent pas (quoi que si j’ai bien compris c’est en partie lié au remplacement dynamique de texte), mais comme on dit souvent : il en faut pour tous les goûts… jusqu’à présent, tu es le seul à m’avoir fait ces retours spécifiques (comment le passage de transparent à blanc derrière du texte peut-il te faire mal aux yeux ??), donc je ne touche à rien… même si « ce vraiment pourri » comme tu le dis si élégamment dans le style sms-texto qui est le tien
D’un autre côté, cet objectif a l’air d’être rempli puisque l’article te plait (apparamment) donc je suis satisfaite : j’espérais rendre service…
Pour répondre à keusta, d’ailleurs, bien vu ta suggestion mais je la trouve un peu trop spécifique… je préférerai traduire un tutorial CSS plus « concret », peut-être un autre sur ALA repéré il y a quelques temps… bref, si tu (vous tous) as (avez) d’autres idées surtout n’hésitez pas !
Bonne journée à tous, à très bientôt !
# - - bob -
Bingo, j’avais pas mis le chemin absolu
Merci beaucoup ca fonctionne au poil
# - - seB -
Bonjour Marie, bonjour tout le monde, ce script est vraiment très intéressant, merci de nous le faire découvrir. J’aurai cependant deux petites questions à formuler :
Comment le faire fonctionner en local (sur le web pas de pb mais en local erreur: le serveur n’a pu créer cette image-titre / pourtant ok pour gd2, "./font.ttf", cache etc…) ?
Enfin, j’ai tenté d’intégrer le tout à mambo avec des balises <h2> dans le texte dynamique et l’image n’apparaît pas. Les fichiers sources sont bien à la racine mais seul le texte non généré en image s’affiche. Faut-il implémenter différement la balise <script> au niveau du template ?
Merci pour votre aide
seB
# - - Arkane -
Je suis triste j’ai bien respecté toutes les consigne mais cela ne fonctionne pas !
Qui vois d’où cela peut venir sniffff
# - - pickupjojo -
Pour ceux chez qui ça ne marche pas du tout (ça fait 2 heures que je cherchais), il suffit de remplacer la ligne où on donne le nom de la police par :
$font_file=$_SERVER["DOCUMENT_ROOT"].’/font.ttf’ ;
Merci pour cet article, c’est bientôt en place sur mon site !
Joffrey
# - - pickupjojo -
Ce serait presque parfait ! Un petit problème me chagrine encore, les détails de celui-ci ici si quelqu’un veut m’aider : http://www.ctrlaltsuppr.com/mess...
# - - Marie ALHOMME -
Bonjour à tous !
Désolée du délai de réponse, mais ils me cravachent dur à l’agence en ce moment !
Merci beaucoup de vos visites en tout cas, ça fait plaisir !
seB : je ne saurai quoi te répondre à part bien vérifier ta configuration de EasyPHP (ou WAMP, ou ce que utilises comme serveur local) et de vider ton cache navigateur… parce que ça marche très bien sinon ?!! Mais si ça marche en ligne en même temps, n’est-ce pas le principal ?
Arkane : sans plus de détail, il va m’être difficile de t’aider… As-tu bien lu les messages de tout le monde, il y a peut-être ta réponse parmi eux ?
pickupjojo : j’adore quand les utilisateurs s’auto-hotline !
J’espère qua ta réponse aidera beaucoup de gens !
Pour ton dernier petit souci, il se rêgle avec les css… donnes la valeur suivante à ton h1 :
padding-top: 6px;et/ou baisse tonpadding-bottom(qui est à 2px), et ça devrait rentrer dans l’ordre !Encore merci de venir me lire, et à très bientôt !!
# - - pickupjojo -
Merci Marie, mais apparement ça n’est pas ça… En effet, si tu regardes sur l’accueil de mon site dans le premier titre il y a le mot "Windows". Dans ce cas précis le "W" ainsi que le "d" ne sont pas à la même hauteur. Le CSS n’y pourra rien dans ce cas, car si on affiche l’image qui a été créée, c’est directement dans celle-ci qu’il y a ce décallage ! Peut être un problème de police ? Pourtant celle-ci n’a aucun problème dans Word ou Photoshop (cf. mon header).
Une piste ? oO-/
# - - pickupjojo -
Police changée, problème réglé !
# - - J-Pierre -
Salut,
Formidable !!
Traduction très agréable à lire, pour un résultat sensationnel. Tout en lisant le texte, j’ai constitué mes fichiers de test, et ça a marché du 1er coup. Et en plus j’ai tout compris (euh sauf le script JS, il est un peu ardu).
Je vais mettre en oeuvre cela sur la prochaine version du site. Je te préviens dès que c’est fait.
PS: j’ai juste un petit soucis, mais je n’ai pas encore creusé. J’ai un cadre sur l’image correspondant à un lien <a href=". Comment le désactive-t-on ?
@+ et encore merci.
# - - J-Pierre -
Au temps pour moi pour la bordure autour de l’image, je croyais que cela faisait partie de l’image mais non. Je l’ai simplement corrigé par un :
img { border: 0px; }
C’est vraiment fantastique !
# - - Marie ALHOMME -
Bonjour J-Pierre !
Merci beaucoup de ta visite et surtout de tes commentaires positifs !! Je suis ravie que ça t’ai plût, et que ça ai marché tout de suite !
Préviens-moi dès que tu auras mis en ligne la nouvelle version avec les « zolis titres » !
A très bientôt j’espère !
PS : j’adore les « auto-debugging users » !!
# - - J-Pierre -
Salut,
Finalement, pas si "auto-debugging" que ça !! Je viens de mettre en place les scripts sur mon site (en dev, non visible sur le net), et j’ai un petit soucis avec la feuille de style replacement-screen.css. J’ai mis des propriétés d’alignement sur l’image générée, mais elles ne s’appliquent pas. Cela donne l’impression que le navigateur (FX+IE+MZ) voit toujours une balise A.
img.replacement {
vertical-align: sub;
border: 2px; /* pour test */
}
Une idée ? D’avance merci pour vos réponses.
@+
# - - Marie ALHOMME -
Re-Bonjour J-Pierre !
J’avoue ne pas bien comprendre ton problème… pourquoi ne nous donnes-tu pas un lien vers un screenshot afin que ce soit plus clair ?
En espérant pouvoir bientôt t’aider…
bonne fin de week-end !
# - - Fred -
Au fait, j’ai fait la synthèse en ligne d’une autre méthode de remplacement du texte en image, utilisable sur les blogs de type Dotclear.
Tu peux trouver le tutoriel ici => yakalire.free.fr/index.ph…
@ +
# - - Mdkart -
Merci beaucoup pour la traduction.
A noter : il existe un système similaire à voir sur http://www.mikeindustries.com/sifr/ mais qui fonctionne avec la création d’un objet flash. Par contre je ne sais pas si ce dernier système est compatible avec les accents.
# - - Mdkart -
Après vérification, sifr fonctionne avec les accents (il suffit d’exporter avec le fichier swf tous les caractères de la police).
# - - Marie ALHOMME -
Bonjour Mdkart, je connaissais effectivement sIFR, merci de ce comlpément d’information ! A bientôt, Marie
# - - Mdkart -
Aie aie aie. J’ai installé la méthode que tu as traduit (plus simple que sifr) et sous FF, aucun problème mais sous IE (bien sûr) les images apparaissent pixellisées.
Comment régler ce problème?
# - - Marie ALHOMME -
Entre nous, ce n’est pas le principal problème de ton blog sous IE (si on parle bien de http://matthieu-deckmyn.c.la)…
Sous FF je ne vois pas la typo donc difficile de comparer avec la version IE… Sinon, tente de jouer avec les tailles et/ou vérifies que ta typo accepte bien toutes les tailles sans dégrader, certaines fonctionnant mieux avec des tailles paires par exemple (c’est fou mais bon)…
Bon, de toute façon, IE…
Bon courage, bonne chance et tiens-nous au courant !!
# - - Marie ALHOMME -
Tu dois être en train de bosser dessus, maintenant c’est sous IE que je ne vois pas la typo…
et je n’avais pas compris qu’il fallait utiliser un autre thème que celui par défaut quand on arrive…
Et je serai toi je mettrai le curseur en forme de main au survol sur les flêches pour fermer les boîtes, je pensais qu’elles étaient uniquement décoratives…
# - - Mdkart -
En effet, je bosse dessus. Je tente quand même le méthode sifr2 (car plus de fonctions quand même) mais j’ai quelques petits problèmes de débordement que j’essaie de régler. Par contre c’est vrai que je n’ai pas mis les mains sur les flêches (en fait je ne savais pas qu’on pouvait le faire
)
Et il y a 30 min, ça devait être bien le foutoir sur le thème je confirme. (sûrement encore maintenant d’ailleurs) *rolleyes*
PS : j’ai créé un billet pour que tu puisse poster des propositions d’amélioration de mon thème. Comme ça je ne polluerai pas plus les commentaires dans ton site
.
# - - Simpleman -
Bonjour très intéressant ton article bravo!!! Juste une question pour ce qui est du référencement qu’elle impact cela a sur les moteurs de recherche comme Google. Généralement les titres sont assez important pour les moteurs ainsi que le texte. Donc si j’applique cette technique est-ce que cela à une incidence négative sur les moteurs de recherche???
# - - Marie ALHOMME -
Bonjour Simpleman !
Il n’y a aucun impact sur le référencement, c’est bien tout l’avantage, puisque le code vu par les robots (et par vous si vous faites « voir la source ») est bien sous la forme de
Texte du titre
Voilà, j’espère que ça réponds à ta question !
Bonnes fêtes de fin d’année et à bientôt !
# - - webzone -
Bonjour,
Après quelques tatonnements, cela fonctionne…
Mais, je n’arrive pas à faire passer une class, ou un id dans le JS…
Ce qui fait que si je mets un replaceSelector sur un h2, puis un replaceSelector sur un <p>, le texte (l’image) a toujours la même taille…
Une solution merci
# - - Mdkart -
Bonjour, j’ai une nouvelle question : pour le remplacement de texte que tu as proposé (car des gens se plaignent de mon système sifr), quel sont les fichiers que le visiteur charge réellement (la police seule plus le javscript bien sûr ou bien les petites images séparément qui seraient dans ce cas créées sur le serveur)
En bref, quel est le système le plus économe en bande passante entre sifr-2 (qui charge à chaque fois un fichier swf d’environ 20ko) et le système que tu propose.
Merci
# - - Marie ALHOMME -
Bonjour Mdkart,
Je suis désolée d’apprendre que tu as des problèmes avec sIFR !
Je rappelle que « je » ne propose PAS ce système mais n’en ai assuré que la traduction. L’auteur de cette méthode est Stewart Rosenberg…
Ce qui est téléchargé est (à ma connaissance) le javascript et les images créées par le script PHP.
En revanche, pour ce qui est de la bande passante réellement utilisée par l’une ou l’autres des méthodes, je n’en sais vraiment rien…
Il faudrait faire des tests ou demander aux auteurs des deux méthodes si ils ont des données à comparer…
Si le sIRF ne télécharge qu’un script et un swf unique de 20ko, ça me parait plutôt raisonnable.
En revanche si il charge un swf par titre, ça peut-etre plus chaud…
Dans le premier cas de figure, si il y a beaucoup de titres c’est sIFR qui « gagne », sinon c’est le DTR.
Dans le second cas de figure, alors c’est peut-être plus le DTR qui est avantageux que le sIFR (je ne pense pas que les png générés soient aussi lourds que les swf de sIFR)…
Aussi, je ne sais pas dans quelle mesure le(s) swf(s) généré(s) par sIFR sont mis en cache… mais ça rentre forcément en ligne de compte !
Voilà, j’espère que ces quelques éléments de réponse auront su t’aider un peu, je te conseille quand même de contacter les auteurs directement pour plus d’informations !
Bonne fin de week-end!
Marie
# - - Marie ALHOMME -
Bonjour webzone,
Encore une fois désolée que le script ne marche pas comme tu l’attendais !
Mais sans avoir une page ou du code, j’ai du mal à comprendre ton problème…
Pour ce qui est de la taille de tes images, elle est déterminée par la valeur donnée à la variable dans le script PHP, pas pas la balise dont le texte est remplacé… en bref, que tu remplaces un h1 ou un h6, la typo dans les images seront toujours de la taille que tu as donnée dans le script…
Après, en ce qui concerne ton problème de javascript j’ai du mal à comprendre ? Qu’as-tu mis comme valeurs ? Pour info voici ce que j’ai mis :
replaceSelector(".day-date","/themes/pouipoui/heading.php",true); replaceSelector(".sidebar .special","/themes/pouipoui/heading2.php",true);Je demande donc de remplacer les balises ayant pour class « daydate » et celles s’appelant « special » contenues dans les div « sidebar »…
Voilà, j’espère que ça t’aide !
Bonne fin de week-end encore !
Marie
# - - Stella -
salut,
déjà un grand merci pour cette source qui permet enfin de pouvoir faire une avancée dans le webdesign.
J’avais trouvé la source en anglais, mais vu mon niveau technique en anglais, impossible de la faire marcher. :-/
J’ai une petite question tout de même. on voit comment modifier la taille du texte et ou placer la police que l’on souhaite utiliser, est il possible de mettre un espacement entre les mots "word-spacing" dans ce code, j’ai fait divers essais, mais n’étant pas pro du php, j’ai beaucoup de mal… j’ai essayé de mettre dans le css, mais ça marche pas.
merci d’avance
# - - Seb -
super top!
Merci pour ta traduction Marie.
En suivant tout à la lettre ça ne fonctionnait pas pour moi du premier coup. En débuguant il s’agissait juste de ton fichier test.png (que tu proposes de télécharger) qui n’allait pas. J’ai recrée un fichier d’1x1px et zouuuu! du 2è coup impec !
Seb
# - - TiBen -
Bonjour,
merci beaucoup pour cette traduction, j’en fais la pub dès que j’ai l’occasion.
Et pour fêter l’achevement (quasi définitif) de mon theme utilisant ce tuto, voila le lien :
agoraz.webdynamit.net/dot…
Juste un truc, est-il possible d’avoir un taille d’image s’adaptant à la taille de l’écran? en em ou en %
j’ai essayé dans heading, mais ça na passait pas.
Merci encore!
# - - Marie ALHOMME -
Hello Tiben,
Je n’ai effectivement pas trouvé de moyen de faire cela, c’est amha la seule vraie grosse limitation à cette méthode… Cela dit, si quelqu’un a d’autres idées, je ne dirai pas non…
Tiens, as-tu essayé par exemple de donner une hauteur en em aux images ? Par exemple : h2.titre img { height: 1em; } ? Ca pixelliserait probablement à partir d’un certain zoom mais peut-être que cela pourrait fonctionner ? Je n’ai pas tenté…
Si ça marche, tiens-moi au courant !
Encore merci de ta visite et de tes commentaires (et de la pub
) et j’espère à bientôt !!
# - - Marie ALHOMME -
Hello Seb (pas vu ton message), merci de ton retour, c’est intéressant ! Peux-tu m’envoyer le png que tu as fait pour que je remplace celui que je propose ?
Merci d’avance et à bientôt !
# - - TiBen -
Pour la taille de l’image,
ça passe effectivement mais il y a pixellisation.
le meilleur réglage chez moi pour h2, c’est
h2 img { height: 1.2em; }
bravo !
# - - Marie ALHOMME -
Salut TiBen,
Ravie de savoir que ça marche, je devrai en faire autant sur mon site d’ailleurs !!
Reviens bientôt, j’ai d’autres traductions sous le coude !
# - - TiBen -
Merci en tous cas,
pour les trad, je pense que mon niveau d’anglais suffit à comprendre les tuto, mais je ne suis aps tombé dessus.
Je suis arrivé ici, alors autant en profiter, et saluer l’effort !
# - - Le blog de Roxanne Fanny Corriveau -
Site de poésie
Voilà… tant qu’à être là dedans, j’ai arrangé le site de poésie… l’image sur le côté devrait changé… Je ne sais pas si je devrais mettre une image dans le haut à la place comme dans les autres site… h…
# - - Marie ALHOMME -
Horreur, malheur, je vois que je n’ai pas répondu à Stella !!!
Mea maxima culpa, pardon pardon !!!
Bref, comme on joue sur la taille des images de remplacement pourquoi ne pas leur donner une marge à droite pour « imiter » un espacement entre les mots ??
Testé, ça marche… Dis-moi si ça te convient !
# - - Daëavelwyn -
Salut,
ça m’a fait perdre quelques heures, donc si ça peut éviter ça à d’autre 
Alleluia Marie, ton script va révolutionner ma vie car j’aurai enfin pour moi le temps que je ne perdrai plus sur the gimp ^^. A noter tout de même, je pense qu’il serait judicieux de préciser qu’il est préférable de créer soi-même l’image test.png de 1pixel sur 1 pixel, car celle que j’ai récupéré ici ou sur le site originel en anglais sont buggés
Voilà, encore bravo et bonne continuation
# - - emmanuelleLATRC -
# - - emmanuelleLATRC -
… c’est encore moi…..
je suis toujours là….. 
bon pour l’espacement c’est directement dans la page php au niveau de create image ().
C’esst ok pour ça.
Cependant et en lisant les comments, la solution pour rendre l’image comme un lien n’est pas explicite… Je cherche je cherche mais sans succès jusqu’à maintenant…
alalalaa… il y a quelqu’un ????
# - - salut ca va bien -
# - - amy -
g 1 probleme !
je c pa du tou si je madresse o bon endroi mai je voudrai trouver 1 logiciel ki permet decrire de cette facon : α∂мιяє ℓα ρєяσииє qυι тє ¢яιтιqυє Саг …. svp aidez moi !!! 
# - - amy -
euh g pa compri la ! sa a du buger sa me stresse et sa menerve ^^