From 2fab0b1ed7950cfebd24ad13f089a343b3d90db4 Mon Sep 17 00:00:00 2001
From: Tim de Koning <github@kingsquare.nl>
Date: Wed, 18 Jan 2012 12:00:59 +0100
Subject: [PATCH] Font rendering fix for < IE9

Fabric expects text to be rendered as Canvas elements. Cufon however falls back to VML rendering when canvas is not available in the browser. This mod of the Cufon library ALWAYS enabled the canvas rendering engine for Cufon.  This way font-rendering is available on IE7 and IE8 when excanvas is available.
---
 lib/cufon.js      | 442 +++++++++++++++++++++++-----------------------
 src/text.class.js | 151 ++++++++--------
 2 files changed, 299 insertions(+), 294 deletions(-)

diff --git a/lib/cufon.js b/lib/cufon.js
index b78f16ce..77beb216 100644
--- a/lib/cufon.js
+++ b/lib/cufon.js
@@ -4,38 +4,38 @@
  */
 
 var Cufon = (function() {
-  
-  var api = function() {  
+
+  var api = function() {
     return api.replace.apply(null, arguments);
   };
-  
+
   var DOM = api.DOM = {
-      
+
     ready: (function() {
-    
+
       var complete = false, readyStatus = { loaded: 1, complete: 1 };
-    
+
       var queue = [], perform = function() {
         if (complete) return;
         complete = true;
         for (var fn; fn = queue.shift(); fn());
       };
-      
+
       // Gecko, Opera, WebKit r26101+
-      
+
       if (fabric.document.addEventListener) {
         fabric.document.addEventListener('DOMContentLoaded', perform, false);
         fabric.window.addEventListener('pageshow', perform, false); // For cached Gecko pages
       }
-      
+
       // Old WebKit, Internet Explorer
-      
+
       if (!fabric.window.opera && fabric.document.readyState) (function() {
         readyStatus[fabric.document.readyState] ? perform() : setTimeout(arguments.callee, 10);
       })();
-      
+
       // Internet Explorer
-      
+
       if (fabric.document.readyState && fabric.document.createStyleSheet) (function() {
         try {
           fabric.document.body.doScroll('left');
@@ -45,39 +45,39 @@ var Cufon = (function() {
           setTimeout(arguments.callee, 1);
         }
       })();
-      
+
       addEvent(fabric.window, 'load', perform); // Fallback
-      
+
       return function(listener) {
         if (!arguments.length) perform();
         else complete ? listener() : queue.push(listener);
       };
-      
+
     })()
-    
+
   };
 
   var CSS = api.CSS = {
-  
+
     Size: function(value, base) {
-    
+
       this.value = parseFloat(value);
       this.unit = String(value).match(/[a-z%]*$/)[0] || 'px';
-    
+
       this.convert = function(value) {
         return value / base * this.value;
       };
-      
+
       this.convertFrom = function(value) {
         return value / this.value * base;
       };
-      
+
       this.toString = function() {
         return this.value + this.unit;
       };
 
     },
-  
+
     getStyle: function(el) {
       return new Style(el.style);
       /*
@@ -87,7 +87,7 @@ var Cufon = (function() {
       return new Style(el.style);
       */
     },
-    
+
     quotedList: cached(function(value) {
       // doesn't work properly with empty quoted strings (""), but
       // it's not worth the extra code.
@@ -95,22 +95,22 @@ var Cufon = (function() {
       while (match = re.exec(value)) list.push(match[3] || match[1]);
       return list;
     }),
-    
+
     ready: (function() {
-      
+
       var complete = false;
-      
+
       var queue = [], perform = function() {
         complete = true;
         for (var fn; fn = queue.shift(); fn());
       };
-      
+
       // Safari 2 does not include <style> elements in document.styleSheets.
       // Safari 2 also does not support Object.prototype.propertyIsEnumerable.
-      
+
       var styleElements = Object.prototype.propertyIsEnumerable ? elementsByTagName('style') : { length: 0 };
       var linkElements = elementsByTagName('link');
-      
+
       DOM.ready(function() {
         // These checks are actually only needed for WebKit-based browsers, but don't really hurt other browsers.
         var linkStyles = 0, link;
@@ -121,12 +121,12 @@ var Cufon = (function() {
         if (fabric.document.styleSheets.length >= styleElements.length + linkStyles) perform();
         else setTimeout(arguments.callee, 10);
       });
-      
+
       return function(listener) {
         if (complete) listener();
         else queue.push(listener);
       };
-      
+
     })(),
 
     supports: function(property, value) {
@@ -135,7 +135,7 @@ var Cufon = (function() {
       checker[property] = value;
       return checker[property] === value;
     },
-    
+
     textAlign: function(word, style, position, wordCount) {
       if (style.get('textAlign') == 'right') {
         if (position > 0) word = ' ' + word;
@@ -143,7 +143,7 @@ var Cufon = (function() {
       else if (position < wordCount - 1) word += ' ';
       return word;
     },
-    
+
     textDecoration: function(el, style) {
       if (!style) style = this.getStyle(el);
       var types = {
@@ -163,7 +163,7 @@ var Cufon = (function() {
       }
       return types;
     },
-    
+
     textShadow: cached(function(value) {
       if (value == 'none') return null;
       var shadows = [], currentShadow = {}, result, offCount = 0;
@@ -183,7 +183,7 @@ var Cufon = (function() {
       shadows.push(currentShadow);
       return shadows;
     }),
-    
+
     color: cached(function(value) {
       var parsed = {};
       parsed.color = value.replace(/^rgba\((.*?),\s*([\d.]+)\)/, function($0, $1, $2) {
@@ -192,27 +192,27 @@ var Cufon = (function() {
       });
       return parsed;
     }),
-    
+
     textTransform: function(text, style) {
       return text[{
         uppercase: 'toUpperCase',
         lowercase: 'toLowerCase'
       }[style.get('textTransform')] || 'toString']();
     }
-    
+
   };
-  
+
   function Font(data) {
-    
+
     var face = this.face = data.face;
     this.glyphs = data.glyphs;
     this.w = data.w;
     this.baseSize = parseInt(face['units-per-em'], 10);
-    
+
     this.family = face['font-family'].toLowerCase();
     this.weight = face['font-weight'];
     this.style = face['font-style'] || 'normal';
-    
+
     this.viewBox = (function () {
       var parts = face.bbox.split(/\s+/);
       var box = {
@@ -228,25 +228,25 @@ var Cufon = (function() {
       };
       return box;
     })();
-    
+
     this.ascent = -parseInt(face.ascent, 10);
     this.descent = -parseInt(face.descent, 10);
-    
+
     this.height = -this.ascent + this.descent;
-    
+
   }
-  
+
   function FontFamily() {
 
     var styles = {}, mapping = {
       oblique: 'italic',
       italic: 'oblique'
     };
-    
+
     this.add = function(font) {
       (styles[font.style] || (styles[font.style] = {}))[font.weight] = font;
     };
-    
+
     this.get = function(style, weight) {
       var weights = styles[style] || styles[mapping[style]]
         || styles.normal || styles.italic || styles.oblique;
@@ -282,22 +282,22 @@ var Cufon = (function() {
       });
       return weights[alts[0]];
     };
-  
+
   }
-  
+
   function HoverHandler() {
-    
+
     function contains(node, anotherNode) {
       if (node.contains) return node.contains(anotherNode);
       return node.compareDocumentPosition(anotherNode) & 16;
     }
-    
+
     function onOverOut(e) {
       var related = e.relatedTarget;
       if (!related || contains(this, related)) return;
       trigger(this);
     }
-    
+
     function onEnterLeave(e) {
       trigger(this);
     }
@@ -310,7 +310,7 @@ var Cufon = (function() {
         api.replace(el, sharedStorage.get(el).options, true);
       }, 10);
     }
-    
+
     this.attach = function(el) {
       if (el.onmouseenter === undefined) {
         addEvent(el, 'mouseover', onOverOut);
@@ -321,43 +321,43 @@ var Cufon = (function() {
         addEvent(el, 'mouseleave', onEnterLeave);
       }
     };
-    
+
   }
-  
+
   function Storage() {
-    
+
     var map = {}, at = 0;
-    
+
     function identify(el) {
       return el.cufid || (el.cufid = ++at);
     }
-    
+
     this.get = function(el) {
       var id = identify(el);
       return map[id] || (map[id] = {});
     };
-    
+
   }
-  
+
   function Style(style) {
-    
+
     var custom = {}, sizes = {};
-    
+
     this.get = function(property) {
       return custom[property] != undefined ? custom[property] : style[property];
     };
-    
+
     this.getSize = function(property, base) {
       return sizes[property] || (sizes[property] = new CSS.Size(this.get(property), base));
     };
-    
+
     this.extend = function(styles) {
       for (var property in styles) custom[property] = styles[property];
       return this;
     };
-    
+
   }
-  
+
   function addEvent(el, type, listener) {
     if (el.addEventListener) {
       el.addEventListener(type, listener, false);
@@ -368,7 +368,7 @@ var Cufon = (function() {
       });
     }
   }
-  
+
   function attach(el, options) {
     var storage = sharedStorage.get(el);
     if (storage.options) return el;
@@ -378,15 +378,15 @@ var Cufon = (function() {
     storage.options = options;
     return el;
   }
-  
+
   function cached(fun) {
     var cache = {};
     return function(key) {
       if (!cache.hasOwnProperty(key)) cache[key] = fun.apply(null, arguments);
       return cache[key];
-    };  
+    };
   }
-  
+
   function getFont(el, style) {
     if (!style) style = CSS.getStyle(el);
     var families = CSS.quotedList(style.get('fontFamily').toLowerCase()), family;
@@ -396,11 +396,11 @@ var Cufon = (function() {
     }
     return null;
   }
-  
+
   function elementsByTagName(query) {
     return fabric.document.getElementsByTagName(query);
   }
-  
+
   function merge() {
     var merged = {}, key;
     for (var i = 0, l = arguments.length; i < l; ++i) {
@@ -408,9 +408,9 @@ var Cufon = (function() {
     }
     return merged;
   }
-  
+
   function process(font, text, style, options, node, el) {
-    
+
     var separate = options.separate;
     if (separate == 'none') return engines[options.engine].apply(null, arguments);
     var fragment = fabric.document.createDocumentFragment(), processed;
@@ -428,7 +428,7 @@ var Cufon = (function() {
     }
     return fragment;
   }
-  
+
   function replaceElement(el, options) {
     var font, style, nextNode, redraw;
     for (var node = attach(el, options).firstChild; node; node = nextNode) {
@@ -444,7 +444,7 @@ var Cufon = (function() {
       }
       if (!style) style = CSS.getStyle(el).extend(options);
       if (!font) font = getFont(el, style);
-      
+
       if (!font) continue;
       if (redraw) {
         engines[options.engine](font, null, style, options, node, el);
@@ -457,13 +457,13 @@ var Cufon = (function() {
       else node.parentNode.removeChild(node);
     }
   }
-  
+
   var HAS_BROKEN_REGEXP = ' '.split(/\s+/).length == 0;
-  
+
   var sharedStorage = new Storage();
   var hoverHandler = new HoverHandler();
   var replaceHistory = [];
-  
+
   var engines = {}, fonts = {}, defaultOptions = {
     engine: null,
     //fontScale: 1,
@@ -487,17 +487,17 @@ var Cufon = (function() {
     separate: 'words', // 'none' and 'characters' are also accepted
     textShadow: 'none'
   };
-  
+
   var separators = {
     words: /\s+/,
     characters: ''
   };
-  
+
   api.now = function() {
     DOM.ready();
     return api;
   };
-  
+
   api.refresh = function() {
     var currentHistory = replaceHistory.splice(0, replaceHistory.length);
     for (var i = 0, l = currentHistory.length; i < l; ++i) {
@@ -505,20 +505,20 @@ var Cufon = (function() {
     }
     return api;
   };
-  
+
   api.registerEngine = function(id, engine) {
     if (!engine) return api;
     engines[id] = engine;
     return api.set('engine', id);
   };
-  
+
   api.registerFont = function(data) {
     var font = new Font(data), family = font.family;
     if (!fonts[family]) fonts[family] = new FontFamily();
     fonts[family].add(font);
     return api.set('fontFamily', '"' + family + '"');
   };
-  
+
   api.replace = function(elements, options, ignoreHistory) {
     options = merge(defaultOptions, options);
     if (!options.engine) return api; // there's no browser support so we'll just stop here
@@ -535,14 +535,14 @@ var Cufon = (function() {
     });
     return api;
   };
-  
+
   api.replaceElement = function(el, options) {
     options = merge(defaultOptions, options);
     if (typeof options.textShadow == 'string' && options.textShadow)
       options.textShadow = CSS.textShadow(options.textShadow);
     return replaceElement(el, options);
   };
-  
+
   // ==>
   api.engines = engines;
   api.fonts = fonts;
@@ -550,49 +550,53 @@ var Cufon = (function() {
     return merge(defaultOptions);
   }
   // <==
-  
+
   api.set = function(option, value) {
     defaultOptions[option] = value;
     return api;
   };
-  
+
   return api;
-  
+
 })();
 
 Cufon.registerEngine('canvas', (function() {
 
   // Safari 2 doesn't support .apply() on native methods
-  
-  var check = fabric.document.createElement('canvas');
-  if (!check || !check.getContext || !check.getContext.apply) return;
-  check = null;
-  
   var HAS_INLINE_BLOCK = Cufon.CSS.supports('display', 'inline-block');
-  
+
   // Firefox 2 w/ non-strict doctype (almost standards mode)
   var HAS_BROKEN_LINEHEIGHT = !HAS_INLINE_BLOCK && (fabric.document.compatMode == 'BackCompat' || /frameset|transitional/i.test(fabric.document.doctype.publicId));
-  
+
   var styleSheet = fabric.document.createElement('style');
   styleSheet.type = 'text/css';
-  styleSheet.appendChild(fabric.document.createTextNode(
-    '.cufon-canvas{text-indent:0}' +
-    '@media screen,projection{' +
-      '.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle' + 
-      (HAS_BROKEN_LINEHEIGHT
-        ? ''
-        : ';font-size:1px;line-height:1px') +
-      '}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden}' +
-      (HAS_INLINE_BLOCK
-        ? '.cufon-canvas canvas{position:relative}'
-        : '.cufon-canvas canvas{position:absolute}') +
-    '}' +
-    '@media print{' +
-      '.cufon-canvas{padding:0 !important}' +
-      '.cufon-canvas canvas{display:none}' +
-      '.cufon-canvas .cufon-alt{display:inline}' +
-    '}'
-  ));
+
+    var textNode = fabric.document.createTextNode(
+        '.cufon-canvas{text-indent:0}' +
+        '@media screen,projection{' +
+          '.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle' +
+          (HAS_BROKEN_LINEHEIGHT
+            ? ''
+            : ';font-size:1px;line-height:1px') +
+          '}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden}' +
+          (HAS_INLINE_BLOCK
+            ? '.cufon-canvas canvas{position:relative}'
+            : '.cufon-canvas canvas{position:absolute}') +
+        '}' +
+        '@media print{' +
+          '.cufon-canvas{padding:0 !important}' +
+          '.cufon-canvas canvas{display:none}' +
+          '.cufon-canvas .cufon-alt{display:inline}' +
+        '}'
+      )
+
+  try {
+      styleSheet.appendChild(textNode);
+  } catch(e) {
+      //IE8- can't do this...
+      styleSheet.setAttribute("type", "text/css");
+      styleSheet.styleSheet.cssText = textNode.data;
+  }
   fabric.document.getElementsByTagName('head')[0].appendChild(styleSheet);
 
   function generateFromVML(path, context) {
@@ -611,7 +615,7 @@ Cufon.registerEngine('canvas', (function() {
           code[i] = { m: 'moveTo', a: [ atX = ~~c[0], atY = ~~c[1] ] };
           break;
         case 'x':
-          code[i] = { m: 'closePath' };
+          code[i] = { m: 'closePath', a: [] };
           break;
         case 'e':
           break generate;
@@ -620,14 +624,14 @@ Cufon.registerEngine('canvas', (function() {
     }
     return code;
   }
-  
+
   function interpret(code, context) {
     for (var i = 0, l = code.length; i < l; ++i) {
       var line = code[i];
       context[line.m].apply(context, line.a);
     }
   }
-  
+
   return function(font, text, style, options, node, el) {
 
     var redraw = (text === null);
@@ -641,10 +645,10 @@ Cufon.registerEngine('canvas', (function() {
 
     var expandTop = 0, expandRight = 0, expandBottom = 0, expandLeft = 0;
     var shadows = options.textShadow, shadowOffsets = [];
-    
+
     Cufon.textOptions.shadowOffsets = [ ];
     Cufon.textOptions.shadows = null;
-    
+
     if (shadows) {
       Cufon.textOptions.shadows = shadows;
       for (var i = 0, l = shadows.length; i < l; ++i) {
@@ -679,9 +683,9 @@ Cufon.registerEngine('canvas', (function() {
       width += lastWidth = Number(glyph.w || font.w) + letterSpacing;
     }
     lineWidths.push(width);
-    
+
     width = Math.max(maxWidth, width);
-    
+
     var lineOffsets = [ ];
     for (var i = lineWidths.length; i--; ) {
       lineOffsets[i] = width - lineWidths[i];
@@ -716,7 +720,7 @@ Cufon.registerEngine('canvas', (function() {
 
     var wStyle = wrapper.style;
     var cStyle = canvas.style || { };
-    
+
     var height = size.convert(viewBox.height - expandTop + expandBottom);
     var roundedHeight = Math.ceil(height);
     var roundingFactor = roundedHeight / height;
@@ -750,19 +754,19 @@ Cufon.registerEngine('canvas', (function() {
 
     var g = Cufon.textOptions.context || canvas.getContext('2d'),
         scale = roundedHeight / viewBox.height;
-    
+
     Cufon.textOptions.fontAscent = font.ascent * scale;
     Cufon.textOptions.boundaries = null;
-    
+
     for (var offsets = Cufon.textOptions.shadowOffsets, i = shadowOffsets.length; i--; ) {
       offsets[i] = [ shadowOffsets[i][0] * scale, shadowOffsets[i][1] * scale ];
     }
-    
+
     g.save();
     g.scale(scale, scale);
-    
+
     g.translate(
-      // we're at the center of an object and need to jump to the top left corner 
+      // we're at the center of an object and need to jump to the top left corner
       // where first character is to be drawn
       -expandLeft - ((1/scale * canvas.width) / 2) + (Cufon.fonts[font.family].offsetLeft || 0),
       -expandTop - (Cufon.textOptions.height / scale) / 2
@@ -785,14 +789,14 @@ Cufon.registerEngine('canvas', (function() {
 
     var textDecoration = Cufon.getTextDecoration(options),
         isItalic = options.fontStyle === 'italic';
-    
+
     function renderBackground() {
       g.save();
-      
+
       g.fillStyle = options.backgroundColor;
-      
+
       var left = 0, lineNum = 0, boundaries = [{ left: 0 }];
-      
+
       if (options.textAlign === 'right') {
         g.translate(lineOffsets[lineNum], 0);
         boundaries[0].left = lineOffsets[lineNum] * scale;
@@ -801,26 +805,26 @@ Cufon.registerEngine('canvas', (function() {
         g.translate(lineOffsets[lineNum] / 2, 0);
         boundaries[0].left = lineOffsets[lineNum] / 2 * scale;
       }
-      
+
       for (var i = 0, l = chars.length; i < l; ++i) {
         if (chars[i] === '\n') {
-          
+
           lineNum++;
-          
+
           var topOffset = -font.ascent - ((font.ascent / 5) * options.lineHeight);
           var boundary = boundaries[boundaries.length - 1];
           var nextBoundary = { left: 0 };
-          
+
           boundary.width = left * scale;
           boundary.height = (-font.ascent + font.descent) * scale;
-          
+
           if (options.textAlign === 'right') {
             g.translate(-width, topOffset);
             g.translate(lineOffsets[lineNum], 0);
             nextBoundary.left = lineOffsets[lineNum] * scale;
           }
           else if (options.textAlign === 'center') {
-            // offset to the start of text in previous line AND half of its offset 
+            // offset to the start of text in previous line AND half of its offset
             // (essentially moving caret to the left edge of bounding box)
             g.translate(-left - (lineOffsets[lineNum - 1] / 2), topOffset);
             g.translate(lineOffsets[lineNum] / 2, 0);
@@ -829,19 +833,19 @@ Cufon.registerEngine('canvas', (function() {
           else {
             g.translate(-left, topOffset);
           }
-          
+
           /* push next boundary (for the next line) */
           boundaries.push(nextBoundary);
-          
+
           left = 0;
-          
+
           continue;
         }
         var glyph = font.glyphs[chars[i]] || font.missingGlyph;
         if (!glyph) continue;
-        
+
         var charWidth = Number(glyph.w || font.w) + letterSpacing;
-        
+
         // only draw background when there's some kind of value
         if (options.backgroundColor) {
           g.save();
@@ -849,45 +853,45 @@ Cufon.registerEngine('canvas', (function() {
           g.fillRect(0, 0, charWidth + 10, -font.ascent + font.descent);
           g.restore();
         }
-        
+
         g.translate(charWidth, 0);
         left += charWidth;
-        
+
         if (i == l-1) {
-          boundaries[boundaries.length - 1].width = left * scale; 
+          boundaries[boundaries.length - 1].width = left * scale;
           boundaries[boundaries.length - 1].height = (-font.ascent + font.descent) * scale;
         }
       }
       g.restore();
-      
+
       Cufon.textOptions.boundaries = boundaries;
     }
-    
+
     function renderText(color) {
       g.fillStyle = color || Cufon.textOptions.color || style.get('color');
-      
+
       var left = 0, lineNum = 0;
-      
+
       if (options.textAlign === 'right') {
         g.translate(lineOffsets[lineNum], 0);
       }
       else if (options.textAlign === 'center') {
         g.translate(lineOffsets[lineNum] / 2, 0);
       }
-      
+
       for (var i = 0, l = chars.length; i < l; ++i) {
         if (chars[i] === '\n') {
-          
+
           lineNum++;
-          
+
           var topOffset = -font.ascent - ((font.ascent / 5) * options.lineHeight);
-          
+
           if (options.textAlign === 'right') {
             g.translate(-width, topOffset);
             g.translate(lineOffsets[lineNum], 0);
           }
           else if (options.textAlign === 'center') {
-            // offset to the start of text in previous line AND half of its offset 
+            // offset to the start of text in previous line AND half of its offset
             // (essentially moving caret to the left edge of bounding box)
             g.translate(-left - (lineOffsets[lineNum - 1] / 2), topOffset);
             g.translate(lineOffsets[lineNum] / 2, 0);
@@ -895,23 +899,23 @@ Cufon.registerEngine('canvas', (function() {
           else {
             g.translate(-left, topOffset);
           }
-          
+
           left = 0;
-          
+
           continue;
         }
         var glyph = font.glyphs[chars[i]] || font.missingGlyph;
         if (!glyph) continue;
-        
+
         var charWidth = Number(glyph.w || font.w) + letterSpacing;
-        
+
         if (textDecoration) {
           g.save();
           g.strokeStyle = g.fillStyle;
-          
+
           // add 2x more thickness — closer to SVG rendering
           g.lineWidth += g.lineWidth;
-          
+
           g.beginPath();
           if (textDecoration.underline) {
             g.moveTo(0, -font.face['underline-position'] + 0.5);
@@ -928,20 +932,20 @@ Cufon.registerEngine('canvas', (function() {
           g.stroke();
           g.restore();
         }
-        
+
         if (isItalic) {
           g.save();
           g.transform(1, 0, -0.25, 1, 0, 0);
         }
-        
+
         g.beginPath();
         if (glyph.d) {
           if (glyph.code) interpret(glyph.code, g);
           else glyph.code = generateFromVML('m' + glyph.d, g);
         }
-        
+
         g.fill();
-        
+
         if (options.strokeStyle) {
           g.closePath();
           g.save();
@@ -950,16 +954,16 @@ Cufon.registerEngine('canvas', (function() {
           g.stroke();
           g.restore();
         }
-        
+
         if (isItalic) {
           g.restore();
         }
-        
+
         g.translate(charWidth, 0);
         left += charWidth;
       }
     }
-    
+
     if (shadows) {
       for (var i = 0, l = shadows.length; i < l; ++i) {
         var shadow = shadows[i];
@@ -980,35 +984,35 @@ Cufon.registerEngine('canvas', (function() {
     return wrapper;
 
   };
-  
+
 })());
 
 Cufon.registerEngine('vml', (function() {
 
   if (!fabric.document.namespaces) return;
-  
+
   var canvasEl = fabric.document.createElement('canvas');
   if (canvasEl && canvasEl.getContext && canvasEl.getContext.apply) return;
-  
+
   if (fabric.document.namespaces.cvml == null) {
     fabric.document.namespaces.add('cvml', 'urn:schemas-microsoft-com:vml');
   }
-  
+
   var check = fabric.document.createElement('cvml:shape');
   check.style.behavior = 'url(#default#VML)';
   if (!check.coordsize) return; // VML isn't supported
   check = null;
-  
+
   fabric.document.write('<style type="text/css">' +
     '.cufon-vml-canvas{text-indent:0}' +
-    '@media screen{' + 
+    '@media screen{' +
       'cvml\\:shape,cvml\\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute}' +
       '.cufon-vml-canvas{position:absolute;text-align:left}' +
       '.cufon-vml{display:inline-block;position:relative;vertical-align:middle}' +
       '.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px}' +
       'a .cufon-vml{cursor:pointer}' +
     '}' +
-    '@media print{' + 
+    '@media print{' +
       '.cufon-vml *{display:none}' +
       '.cufon-vml .cufon-alt{display:inline}' +
     '}' +
@@ -1017,7 +1021,7 @@ Cufon.registerEngine('vml', (function() {
   function getFontSizeInPixels(el, value) {
     return getSizeInPixels(el, /(?:em|ex|%)$/i.test(value) ? '1em' : value);
   }
-  
+
   // Original by Dead Edwards.
   // Combined with getFontSizeInPixels it also works with relative units.
   function getSizeInPixels(el, value) {
@@ -1030,29 +1034,29 @@ Cufon.registerEngine('vml', (function() {
     el.runtimeStyle.left = runtimeStyle;
     return result;
   }
-  
+
   return function(font, text, style, options, node, el, hasNext) {
     var redraw = (text === null);
-    
+
     if (redraw) text = node.alt;
-    
+
     // @todo word-spacing, text-decoration
-  
+
     var viewBox = font.viewBox;
-    
-    var size = style.computedFontSize || 
+
+    var size = style.computedFontSize ||
       (style.computedFontSize = new Cufon.CSS.Size(getFontSizeInPixels(el, style.get('fontSize')) + 'px', font.baseSize));
-    
+
     var letterSpacing = style.computedLSpacing;
-    
+
     if (letterSpacing == undefined) {
       letterSpacing = style.get('letterSpacing');
-      style.computedLSpacing = letterSpacing = 
+      style.computedLSpacing = letterSpacing =
         (letterSpacing == 'normal') ? 0 : ~~size.convertFrom(getSizeInPixels(el, letterSpacing));
     }
-    
+
     var wrapper, canvas;
-    
+
     if (redraw) {
       wrapper = node;
       canvas = node.firstChild;
@@ -1061,88 +1065,88 @@ Cufon.registerEngine('vml', (function() {
       wrapper = fabric.document.createElement('span');
       wrapper.className = 'cufon cufon-vml';
       wrapper.alt = text;
-      
+
       canvas = fabric.document.createElement('span');
       canvas.className = 'cufon-vml-canvas';
       wrapper.appendChild(canvas);
-      
+
       if (options.printable) {
         var print = fabric.document.createElement('span');
         print.className = 'cufon-alt';
         print.appendChild(fabric.document.createTextNode(text));
         wrapper.appendChild(print);
       }
-      
+
       // ie6, for some reason, has trouble rendering the last VML element in the document.
       // we can work around this by injecting a dummy element where needed.
       // @todo find a better solution
       if (!hasNext) wrapper.appendChild(fabric.document.createElement('cvml:shape'));
     }
-    
+
     var wStyle = wrapper.style;
     var cStyle = canvas.style;
-    
+
     var height = size.convert(viewBox.height), roundedHeight = Math.ceil(height);
     var roundingFactor = roundedHeight / height;
     var minX = viewBox.minX, minY = viewBox.minY;
-    
+
     cStyle.height = roundedHeight;
     cStyle.top = Math.round(size.convert(minY - font.ascent));
     cStyle.left = Math.round(size.convert(minX));
-    
+
     wStyle.height = size.convert(font.height) + 'px';
-    
+
     var textDecoration = Cufon.getTextDecoration(options);
-    
+
     var color = style.get('color');
-    
+
     var chars = Cufon.CSS.textTransform(text, style).split('');
-    
+
     var width = 0, offsetX = 0, advance = null;
-    
+
     var glyph, shape, shadows = options.textShadow;
-    
+
     // pre-calculate width
     for (var i = 0, k = 0, l = chars.length; i < l; ++i) {
       glyph = font.glyphs[chars[i]] || font.missingGlyph;
       if (glyph) width += advance = ~~(glyph.w || font.w) + letterSpacing;
     }
-    
+
     if (advance === null) return null;
-    
+
     var fullWidth = -minX + width + (viewBox.width - advance);
-  
+
     var shapeWidth = size.convert(fullWidth * roundingFactor), roundedShapeWidth = Math.round(shapeWidth);
-    
+
     var coordSize = fullWidth + ',' + viewBox.height, coordOrigin;
     var stretch = 'r' + coordSize + 'nsnf';
-    
+
     for (i = 0; i < l; ++i) {
-      
+
       glyph = font.glyphs[chars[i]] || font.missingGlyph;
       if (!glyph) continue;
-      
+
       if (redraw) {
         // some glyphs may be missing so we can't use i
         shape = canvas.childNodes[k];
         if (shape.firstChild) shape.removeChild(shape.firstChild); // shadow
       }
-      else { 
+      else {
         shape = fabric.document.createElement('cvml:shape');
         canvas.appendChild(shape);
       }
-      
+
       shape.stroked = 'f';
       shape.coordsize = coordSize;
       shape.coordorigin = coordOrigin = (minX - offsetX) + ',' + minY;
       shape.path = (glyph.d ? 'm' + glyph.d + 'xe' : '') + 'm' + coordOrigin + stretch;
       shape.fillcolor = color;
-      
+
       // it's important to not set top/left or IE8 will grind to a halt
       var sStyle = shape.style;
       sStyle.width = roundedShapeWidth;
       sStyle.height = roundedHeight;
-      
+
       if (shadows) {
         // due to the limitations of the VML shadow element there
         // can only be two visible shadows. opacity is shared
@@ -1162,19 +1166,19 @@ Cufon.registerEngine('vml', (function() {
         shadow.opacity = color1.opacity || (color2 && color2.opacity) || 1;
         shape.appendChild(shadow);
       }
-      
+
       offsetX += ~~(glyph.w || font.w) + letterSpacing;
-      
+
       ++k;
-      
+
     }
-    
+
     wStyle.width = Math.max(Math.ceil(size.convert(width * roundingFactor)), 0);
-    
+
     return wrapper;
-    
+
   };
-  
+
 })());
 
 Cufon.getTextDecoration = function(options) {
@@ -1187,4 +1191,4 @@ Cufon.getTextDecoration = function(options) {
 
 if (typeof exports != 'undefined') {
   exports.Cufon = Cufon;
-}
\ No newline at end of file
+}
diff --git a/src/text.class.js b/src/text.class.js
index 98749b5f..6ab3d2a5 100644
--- a/src/text.class.js
+++ b/src/text.class.js
@@ -1,14 +1,14 @@
 //= require "object.class"
 
 (function(global) {
-  
+
   "use strict";
-  
+
   var fabric = global.fabric || (global.fabric = { }),
       extend = fabric.util.object.extend,
       clone = fabric.util.object.clone;
 
-  if (fabric.Text) {    
+  if (fabric.Text) {
     fabric.warn('fabric.Text is already defined');
     return;
   }
@@ -16,93 +16,93 @@
     fabric.warn('fabric.Text requires fabric.Object');
     return;
   }
-  
-  /** 
+
+  /**
    * @class Text
    * @extends fabric.Object
    */
   fabric.Text = fabric.util.createClass(fabric.Object, /** @scope fabric.Text.prototype */ {
-    
+
     /**
      * @property
      * @type Number
      */
     fontSize:         40,
-    
+
     /**
      * @property
      * @type Number
      */
     fontWeight:       100,
-    
+
     /**
      * @property
      * @type String
      */
     fontFamily:       'Times_New_Roman',
-    
+
     /**
      * @property
      * @type String
      */
     textDecoration:   '',
-    
+
     /**
      * @property
      * @type String | null
      */
     textShadow:       null,
-    
+
     /**
      * Determines text alignment. Possible values: "left", "center", or "right".
      * @property
      * @type String
      */
     textAlign:        'left',
-    
+
     /**
      * @property
      * @type String
      */
     fontStyle:        '',
-    
+
     /**
      * @property
      * @type Number
      */
     lineHeight:       1.6,
-    
+
     /**
      * @property
      * @type String
      */
     strokeStyle:      '',
-    
+
     /**
      * @property
      * @type Number
      */
     strokeWidth:      1,
-    
+
     /**
      * @property
      * @type String
      */
     backgroundColor:  '',
-    
-    
+
+
     /**
      * @property
      * @type String | null
      */
     path:             null,
-    
+
     /**
      * @property
      * @type String
      */
     type:             'text',
-    
+
     /**
      * Constructor
      * @method initialize
@@ -118,9 +118,9 @@
       this.width = this.getWidth();
       this.setCoords();
     },
-    
+
     /**
-     * Creates `stateProperties` list on an instance, and adds `fabric.Text` -specific ones to it 
+     * Creates `stateProperties` list on an instance, and adds `fabric.Text` -specific ones to it
      * (such as "fontFamily", "fontWeight", etc.)
      * @private
      * @method _initStateProperties
@@ -128,13 +128,13 @@
     _initStateProperties: function() {
       this.stateProperties = this.stateProperties.concat();
       this.stateProperties.push(
-        'fontFamily', 
-        'fontWeight', 
-        'fontSize', 
-        'path', 
-        'text', 
-        'textDecoration', 
-        'textShadow', 
+        'fontFamily',
+        'fontWeight',
+        'fontSize',
+        'path',
+        'text',
+        'textDecoration',
+        'textShadow',
         'textAlign',
         'fontStyle',
         'lineHeight',
@@ -144,7 +144,7 @@
       );
       fabric.util.removeFromArray(this.stateProperties, 'width');
     },
-    
+
     /**
      * Returns string representation of an instance
      * @method toString
@@ -154,7 +154,7 @@
       return '#<fabric.Text (' + this.complexity() +
         '): { "text": "' + this.text + '", "fontFamily": "' + this.fontFamily + '" }>';
     },
-    
+
     /**
      * @private
      * @method _render
@@ -162,21 +162,22 @@
      */
     _render: function(ctx) {
       var o = Cufon.textOptions || (Cufon.textOptions = { });
-      
+
       // export options to be used by cufon.js
       o.left = this.left;
       o.top = this.top;
       o.context = ctx;
       o.color = this.fill;
-      
+
       var el = this._initDummyElement();
-      
+
       // set "cursor" to top/left corner
       this.transform(ctx);
-      
+
       // draw text
       Cufon.replaceElement(el, {
-        separate: 'none', 
+        engine: 'canvas',
+        separate: 'none',
         fontFamily: this.fontFamily,
         fontWeight: this.fontWeight,
         textDecoration: this.textDecoration,
@@ -188,7 +189,7 @@
         strokeWidth: this.strokeWidth,
         backgroundColor: this.backgroundColor
       });
-      
+
       // update width, height
       this.width = o.width;
       this.height = o.height;
@@ -197,11 +198,11 @@
       this._boundaries = o.boundaries;
       this._shadowOffsets = o.shadowOffsets;
       this._shadows = o.shadows || [ ];
-      
+
       // need to set coords _after_ the width/height was retreived from Cufon
       this.setCoords();
     },
-    
+
     // _render: function(context) {
     //       context.fillStyle = this.fill;
     //       context.font = this.fontSize + 'px ' + this.fontFamily;
@@ -211,7 +212,7 @@
     //       context.fillText(this.text, -this.width / 2, 0);
     //       this.setCoords();
     //     },
-    
+
     /**
      * @private
      * @method _initDummyElement
@@ -219,17 +220,17 @@
     _initDummyElement: function() {
       var el = fabric.document.createElement('div'),
           container = fabric.document.createElement('div');
-      
+
       // Cufon doesn't play nice with textDecoration=underline if element doesn't have a parent
       container.appendChild(el);
       el.innerHTML = this.text;
-      
+
       el.style.fontSize = this.fontSize + 'px';
       el.style.letterSpacing = 'normal';
-      
+
       return el;
     },
-    
+
     /**
      * Renders text instance on a specified context
      * @method render
@@ -244,7 +245,7 @@
       }
       ctx.restore();
     },
-    
+
     /**
      * Returns object representation of an instance
      * @method toObject
@@ -267,20 +268,20 @@
         backgroundColor: this.backgroundColor
       });
     },
-    
+
     /**
      * Returns svg representation of an instance
      * @method toSVG
      * @return {string} svg representation of an instance
      */
     toSVG: function() {
-      
+
       var textLines = this.text.split('\n'),
           lineTopOffset = -this._fontAscent - ((this._fontAscent / 5) * this.lineHeight),
-          
+
           textLeftOffset = -(this.width/2),
           textTopOffset = (this.height/2) - (textLines.length * this.fontSize) - this._totalLineHeight,
-          
+
           textAndBg = this._getSVGTextAndBg(lineTopOffset, textLeftOffset, textLines),
           shadowSpans = this._getSVGShadows(lineTopOffset, textLines);
 
@@ -302,7 +303,7 @@
         '</g>'
       ].join('');
     },
-    
+
     _getSVGShadows: function(lineTopOffset, textLines) {
       var shadowSpans = [ ]
       for (var j = 0, jlen = this._shadows.length; j < jlen; j++) {
@@ -311,7 +312,7 @@
           shadowSpans.push(
             '<tspan x="',
             lineLeftOffset + this._shadowOffsets[j][0],
-            (i === 0 ? '" y' : '" dy'), '="', 
+            (i === 0 ? '" y' : '" dy'), '="',
             lineTopOffset + (i === 0 ? this._shadowOffsets[j][1] : 0),
             '" fill="',
             this._shadows[j].color,
@@ -322,35 +323,35 @@
       }
       return shadowSpans;
     },
-    
+
     _getSVGTextAndBg: function(lineTopOffset, textLeftOffset, textLines) {
       var textSpans = [ ], textBgRects = [ ];
-      
+
       // text and background
       for (var i = 0, len = textLines.length; i < len; i++) {
-          
+
         var lineLeftOffset = (this._boundaries && this._boundaries[i]) ? this._boundaries[i].left : 0;
         textSpans.push(
-          '<tspan x="', 
-          lineLeftOffset, '" ', 
-          (i === 0 ? 'y' : 'dy'), '="', 
-          lineTopOffset, '">', 
-          textLines[i], 
+          '<tspan x="',
+          lineLeftOffset, '" ',
+          (i === 0 ? 'y' : 'dy'), '="',
+          lineTopOffset, '">',
+          textLines[i],
           '</tspan>'
         );
-        
+
         if (!this.backgroundColor) continue;
         textBgRects.push(
-          '<rect fill="', 
-            this.backgroundColor, 
-            '" x="', 
-            textLeftOffset + this._boundaries[i].left, 
-            '" y="', 
+          '<rect fill="',
+            this.backgroundColor,
+            '" x="',
+            textLeftOffset + this._boundaries[i].left,
+            '" y="',
             /* an offset that seems to straighten things out */
             (lineTopOffset * i) - this.height / 2 + (this.lineHeight * 2.6),
-            '" width="', 
+            '" width="',
             this._boundaries[i].width,
-            '" height="', 
+            '" height="',
             this._boundaries[i].height,
           '"></rect>');
       }
@@ -371,7 +372,7 @@
       this.set('fill', value);
       return this;
     },
-    
+
     /**
      * Sets fontSize of an instance and updates its coordinates
      * @method setFontsize
@@ -384,7 +385,7 @@
       this.setCoords();
       return this;
     },
-    
+
     /**
      * Returns actual text value of an instance
      * @method getText
@@ -393,7 +394,7 @@
     getText: function() {
       return this.text;
     },
-    
+
     /**
      * Sets text of an instance, and updates its coordinates
      * @method setText
@@ -406,7 +407,7 @@
       this.setCoords();
       return this;
     },
-    
+
     /**
      * Sets specified property to a specified value
      * @method set
@@ -430,7 +431,7 @@
       return this;
     }
   });
-  
+
   /**
    * Returns fabric.Text instance from an object representation
    * @static
@@ -441,7 +442,7 @@
   fabric.Text.fromObject = function(object) {
     return new fabric.Text(object.text, clone(object));
   };
-  
+
   /**
    * Returns fabric.Text instance from an SVG element (<b>not yet implemented</b>)
    * @static
@@ -451,5 +452,5 @@
   fabric.Text.fromElement = function(element) {
     // TODO (kangax): implement this
   };
-  
-})(typeof exports != 'undefined' ? exports : this);
\ No newline at end of file
+
+})(typeof exports != 'undefined' ? exports : this);