Run Cufon in PHP

Question

Ist es möglich, das Cufon Text Replacement Skript in PHP (oder bevor es an den Browser gesendet wird) laufen zu lassen? Der Grund, warum ich frage, ist, dass es ein bisschen ein Problem mit dem angezeigten HTML gibt, da es sich um den normalen Browser handelt, der gerendert wurde, bevor Cufon in der Lage ist, seine Magie darüber zu ziehen. Der Benutzer sieht einen Flash von nicht gerenderten Text (FOUT), bevor er durch Cufons Großartigkeit ersetzt wird. Ich habe bemerkt, dass der gerenderte HTML-Code einige Tags anstelle des HTML- (Canvas- und Cufon-Tags) -Text generiert hat und ich dachte, was wäre, wenn dies in PHP gemacht und dann an den Browser gesendet werden könnte, damit der Browser das Gezeichnete tatsächlich erhält Text von Anfang an ?. Würde das bedeuten, dass Sie den Code, der den Text in PHP zeichnet, portieren? Das kam letzte Nacht als ein Geniestreich oder wahrscheinlicher Dummheit und fragte sich, ob jemand irgendwelche Gedanken dazu hatte. Danke fürs Lesen.

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 
           } 
     }); 

Hier ist die 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> 

Ich möchte die oben HTML an den Browser von Anfang an, ist wie etwas vorge Cufon sie senden:

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

Answer 1

Sie könnten Cufons eingebaute Funktion

Cufon.now(); 

verwenden

So gibt es keinen Flash beim Ersetzen des Textes.

Answer 2

Gute Idee, und es ist etwas, was die Leute schon eine Weile machen. Hier ist ein Anfang eines aus dem Jahr 2004: http://www.alistapart.com/articles/dynatext/

Und ein paar neueren

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

Answer 3

Cufon hat eine Callback-Funktion, die ausgeführt wird, nachdem die gesamte Text ersetzt wurde: http://groups.google.com/group/cufon/browse_thread/thread/20a8d2edd45f1aa5/1a498d21856405cd

Sie könnten entweder

1. zunächst den Inhalt mit CSS verstecken, zeigen Sie sie dann mit Javascript in der Callback, und sein absolut sicher, dass Sie keine FOUT haben - aber Ihre Seite

2. Oder für Benutzer ohne JS völlig unzugänglich sein verstecken den Inhalt mit JS, wenn das DOM bereit ist, und dann nach dem Ersetzen des Texts erneut anzeigen. Mit jQuery,

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

Dies sollte für Firefox/Webkit gut funktionieren, aber es wird immer noch ein FOUC in IE sein, bevor die JS wirksam wird. Sie können auch $('#content').fadeTo(0, 0); verwenden, wenn Sie den Inhalt nach dem Ersetzen durch Cufon einblenden möchten.

EDIT
Ich habe eine überlegene Art und Weise herausgefunden.Sie gehen mit der # 1-Ansatz, Inhalt mit CSS verbergen, aber dann werfen Sie in einen <noscript> Bereich mit einer Stil-Deklaration, die visibility:visible

wir auf diese Weise gibt es absolut keine FOUC, und wenn JS aktiviert ist, sie gewonnen ' Ich habe auch ein Problem.

Answer 4

Ich setze meine Sichtbarkeit in css auf "false", rufe die Ersetzungsfunktion auf Cufon auf und verwende den onAfterReplace Callback, um das Element sichtbar zu machen.