Exécuter Cufon en PHP

Question

Est-il possible d'exécuter le script de remplacement de texte Cufon en PHP (ou avant son envoi au navigateur)? La raison pour laquelle je pose la question est qu'il y a un peu de problème avec le HTML affiché étant son texte rendu par le navigateur normal avant que Cufon ne soit capable d'attirer sa magie dessus. L'utilisateur voit un flash de texte non-rendu (FOUT) avant qu'il ne soit remplacé par awesomeness Cufon. J'ai remarqué que le HTML rendu a des balises générées à la place du texte HTML (canevas et balises Cufon) et j'ai pensé, et si cela pouvait être fait en PHP et ensuite envoyé au navigateur pour que le navigateur reçoive effectivement le dessin texte depuis le début? Cela signifie-t-il le portage sur le code qui dessine le texte sur PHP? Cela est venu comme un coup de génie ou une bêtise plus probable la nuit dernière et se demandait si quelqu'un avait des idées sur le sujet. Merci d'avoir lu.

Cufon.replace('div#nav-menu a h5',{ 
      fontFamily:'United Stencil', 
      hover: true, 
      hoverables : {h5 : true} 
      });   
     Cufon.replace('.stencil',{fontFamily:'United Stencil'}) 
     Cufon.replace('.heavy',{ 
      fontFamily : 'United Heavy', 
      hover : true, 
      hoverables : { 
           h1:true, 
           h2:true, 
           h3:true 
           } 
     }); 

Voici le Cufoned HTML:

<a class=" heavy" href="/mp_svn/node/5"> 
<cufon class="cufon cufon-canvas" alt="Products" style="width: 65px; height: 16px;"> 
    <canvas width="77" height="17" style="width: 77px; height: 17px; top: -2px; left: -2px;"></canvas> 
    <cufontext>Products</cufontext> 
</cufon> 

Je voudrais envoyer le code HTML ci-dessus pour le navigateur depuis le début, pré-Cufon est quelque chose comme:

<a href="/mp_svn/node/5">Products</a> 

Answer 1

Vous pouvez utiliser la fonction intégrée de Cufon

Cufon.now(); 

Il n'y a donc pas de flash lors du remplacement du texte.

Answer 2

Excellente idée, et c'est quelque chose que les gens font depuis un moment. Voici un début un de 2004: http://www.alistapart.com/articles/dynatext/

Et quelques plus récents

• http://artypapers.com/csshelppile/pcdtr/
• http://www.joaomak.net/util/dtr/

Answer 3

Cufon a une fonction de rappel qui court après tout le texte a été remplacé: http://groups.google.com/group/cufon/browse_thread/thread/20a8d2edd45f1aa5/1a498d21856405cd

Vous pouvez soit

1. cacher Dans un premier temps le contenu avec CSS, montrer ensuite avec javascript dans le rappel, et être absolument sûr que vous aurez pas FOUT - mais votre page sera totalement inaccessible pour les utilisateurs sans JS

2. Ou, cacher le contenu avec JS lorsque le DOM est prêt, puis affichez-le à nouveau après le remplacement du texte. En utilisant jQuery,

   $(document).ready(function(){ 
       $('#content').css('visibility', 'hidden'); 
   
       Cufon.CSS.ready(function() { 
        $('#content').css('visibility, 'visible'); 
       }); 
   }); 
   

Cela devrait fonctionner correctement pour Firefox/WebKit, mais il y aura encore un FOUC dans IE avant la JS prend effet. Vous pouvez également utiliser $('#content').fadeTo(0, 0); si vous voulez être en mesure de fondre dans le contenu une fois qu'il a été remplacé par Cufon.

EDIT
J'ai trouvé un moyen supérieur.Vous allez avec la # 1 approche, masquer le contenu avec CSS, mais vous jetez dans une zone <noscript> avec une déclaration de style qui remet à zéro visibility:visible

De cette façon, il n'y aura absolument pas FOUC, et si JS est activé, ils ont gagné » J'ai un problème non plus.

Answer 4

J'ai défini ma visibilité sur false dans css, appelez la fonction replace sur Cufon et utilisez le rappel onAfterReplace pour définir l'élément visible.

$(document).ready(function(){  
    Cufon.replace('h1', { fontFamily: 'alwyn-thin',  
    onAfterReplace:function(el,options){  
     $(el).css('visibility', 'visible'); 
}});