Run Cufon in PHP

Is it possible to run the Cufon text replacement script in PHP (or before its sent to the browser)? The reason I ask is that there is a bit of an issue with the displayed HTML being its normal browser rendered text before Cufon is able to draw its magic over it. The user sees a flash of unrendered开发者_开发百科 text (FOUT) before it is replaced with Cufon's awesomeness. I've noticed that the rendered HTML has some tags generated in place of the HTML (canvas and Cufon tags) text and I thought, what if this could be done in PHP and then sent to the browser so that the browser actually receives the drawn text from the start?. Would this mean porting over the code that draws the text to PHP? This came as a stroke of genius or more likely stupidity last night and was wondering if anyone had some thoughts on the matter. Thanks for reading.

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

Here is the 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>

I would like to send the above HTML to the browser from the beginning, pre-Cufon it is something like:

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

---

Cufon has a callback function that runs after all text has been replaced: http://groups.google.com/group/cufon/browse_thread/thread/20a8d2edd45f1aa5/1a498d21856405cd

You could either

1. Initially hide the content with CSS, then show it with javascript in the callback, and be absolutely sure you will have no FOUT--but your page will be totally inaccessible for users without JS

2. Or, hide the content with JS when the DOM is ready, and then show it again after the text replacement has occurred. Using jQuery,

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

This should work fine for Firefox/webkit, but there will still be a FOUC in IE before the JS takes effect. You could also use $('#content').fadeTo(0, 0); if you want to be able to fade in the content once it's been replaced by Cufon.

EDIT
I have figured out a superior way. You go with the #1 approach, hiding content with CSS, but then you throw in a <noscript> area with a style declaration that resets visibility:visible

That way there will be absolutely no FOUC, and if JS is enabled, they won't have a problem either.

---

You could use Cufon's built in function

Cufon.now();

So there's no flash when replacing the text.

---

Great idea, and it's something people have been doing for a while. Here's an early one from 2004: http://www.alistapart.com/articles/dynatext/

And a few newer ones

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

---

I set my visibility to false in css, call the replace function on Cufon and use the onAfterReplace callback to set the element to visible.

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