gistfile1.js

// the text-align: centaur; polyfill
// by paul irish

// it will find any styles that use `text-align: centaur` and instantly centaurize that text!

// uses the JSCSSP parser by Daniel Glazman

// thx to cameron daigle for march 2011's best javascript.
// http://textaligncentaur.com/


// USAGE:


// Modernizr
//     // first we feature test for native support of text-align: centaur;
//     // because...  you never know..
//         .addTest('textaligncentaur', function(){
//             var div = document.createElement('div');
//             div.style.textAlign = 'centaur';
//             return div.style.textAlign == 'centaur';
//         })
//     // now we load our polyfill.
//         .load({
//           test : Modernizr.textaligncentaur,
//           nope : 'http://text-align.com/centaur.js'
//         });
// 


// DEMO:
// http://jsfiddle.net/paul/GJJbw/9/



(window.centaur = {
     map : '   x|  xxx|  xxx|  xxx|  xxx|  xxx|  xxx|xxxxxxx      xxxxx|  xxx       xxxxxxx       xxx|  xxx       xxxxxxx       xxx|  xxx       xxxxxxx       xxx|  xxx         xxx         xxx|  xxxx       xxxxx       xxxx|    xxxxxxxxxxxxxxxxxxxxxxxx|         xxxxxxxxxxxxx|           xxxxxxxxxx|           xxxxxxxxxx|           xxxxxxxxxx|           xxxxxxxxxx|          xxxxxxxxxxxxxx              xxxxxxxxxx|         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxx|          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx   xxxx|           xxxxxxxx                 xxxxxxxxxxxxx     xxxx|            xxxxxx                    xxxxxxxx       xxxx|             xxxx                      xxxxxx        xxx|            xxxx                       xxxxx         xx|           xxxx                       xxxxx          xx|            xxxx                       xxxxx         x|            xxxx                       xxxxx|             xxxx                      xxxx|             xxxx                      xxxx|            xxxxxx                    xxxxxx|            xxxxxx                    xxxxxx|',
     
     centaurize : function(elem) {

         var text = elem.innerText.replace(/[^a-zA-Z0-9]/g, '');
         var centaured_text = [];
         if (text.length >= centaur.map.replace(/[^a-zA-Z0-9]/g, '').length) {
             text = text.split('').reverse();
             for (var i = 0; i < centaur.map.length; i++) {
                 var c = centaur.map[i];
                 if (c === '|') {
                     centaured_text.push('\n');
                 } else if (c === ' ') {
                     centaured_text.push(c);
                 } else {
                     centaured_text.push(text.pop());
                 }
             }
             elem.style.whiteSpace = 'pre-wrap';
             elem.style.wordWrap = 'break-word';
             elem.style.fontFamily = 'monospace';
             elem.style.minWidth = '418px';
             elem.style.minHeight = '496px';
             elem.style.fontSize =  '11px';
             elem.style.overflow = 'auto';
             elem.innerText = centaured_text.join('') + text.reverse().join('');
         } else {
             // "Cannot Centaur Text: Needs More Letters";
         }
     },
     
     
     


    parse : function(txt) {
         var parser = new CSSParser();
         var sheet = parser.parse(txt, false, true);

         if (!sheet || (sheet && !sheet.cssRules)) return;

         [].forEach.call(sheet.cssRules, function (rule) {
             [].forEach.call(rule.declarations, function (declaration, i) {

                 //console.log(declaration.property, declaration, rule);
                 if (declaration.property == 'text-align' && declaration.valueText && ~declaration.valueText.indexOf('centaur')) {

                     [].forEach.call(document.querySelectorAll(rule.mSelectorText), function (match) {
                         centaur.centaurize(match);
                     });
                 }

             });
         });
     },
     
     
     crawlDOM : function(){
       
       [].forEach.call(document.querySelectorAll('link[rel="stylesheet"]'), function (el) {

           var req = new XMLHttpRequest();
           req.open('GET', el.href, true);
           req.onreadystatechange = function (aEvt) {
               if (req.readyState == 4) {
                   if (req.status == 200) centaur.parse(req.responseText);
                   else "Error loading page\n";
               }
           };
           try {
               req.send(null);
           } catch (e) {}
       });

       [].forEach.call(document.querySelectorAll('style'), function (el) {
           centaur.parse(el.innerText);
       });
       
       
       // due to limitations of the CSSOM, we cant parse inline (invalid) styles..
       
     },
     
    getScript : function(url,success){

       var refElem = document.getElementsByTagName('script')[0],
           script = document.createElement("script");
           done = false;

       script.src = url;

       script.onload = script.onreadystatechange = function(){
         if ( !done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") ) {
           done = true;
           success();
           //refElem.removeChild( script );
         }
       };

       refElem.parentNode.insertBefore(script,refElem);
     },
     
     init : function(){
       

       window.CSSParser ? centaur.crawlDOM() :
                          centaur.getScript('http://sources.disruptive-innovations.com/jscssp/trunk/cssParser.js',centaur.crawlDOM);
       
     }
     

}).init();