listen and react on character size changes

src/ace/VirtualRenderer.js

@@ -42,6 +42,12 @@ ace.VirtualRenderer = function(container) {
     this.$updatePrintMargin();
     this.onResize();
 
+    var self = this;
+    this.textLayer.addEventListener("changeCharaterSize", function() {
+        self.characterWidth = textLayer.getCharacterWidth();
+        self.lineHeight = textLayer.getLineHeight();
+        self.onResize();
+    });
     ace.addListener(this.$gutter, "click", ace.bind(this.$onGutterClick, this));
     ace.addListener(this.$gutter, "dblclick", ace.bind(this.$onGutterClick, this));
 };

src/ace/layer/Text.js

@@ -5,11 +5,14 @@ ace.layer.Text = function(parentEl) {
     this.element.className = "layer text-layer";
     parentEl.appendChild(this.element);
 
-    this.$measureSizes();
+    this.$characterSize = this.$measureSizes();
+    this.$pollSizeChanges();
 };
 
 (function() {
 
+    ace.implement(this, ace.MEventEmitter);
+
     this.EOF_CHAR = "¶";
     this.EOL_CHAR = "¬";
     this.TAB_CHAR = "→";
@@ -20,11 +23,22 @@ ace.layer.Text = function(parentEl) {
     };
 
     this.getLineHeight = function() {
-        return this.lineHeight;
+        return this.$characterSize.height || 1;
     };
 
     this.getCharacterWidth = function() {
-        return this.characterWidth;
+        return this.$characterSize.width || 1;
+    };
+
+    this.$pollSizeChanges = function() {
+        var self = this;
+        setInterval(function() {
+            var size = self.$measureSizes();
+            if (self.$characterSize.width !== size.width || self.$characterSize.height !== size.height) {
+                self.$characterSize = size;
+                self.$dispatchEvent("changeCharaterSize", {data: size});
+            }
+        }, 500);
     };
 
     this.$measureSizes = function() {
@@ -36,27 +50,19 @@ ace.layer.Text = function(parentEl) {
         style.position = "absolute";
         style.overflow = "visible";
 
-        var parent = this.element.parentNode;
-        var sibling = this.element.nextSibling;
-
-        document.body.appendChild(this.element);
-
         measureNode.innerHTML = new Array(1000).join("Xy");
         this.element.appendChild(measureNode);
 
         // in FF 3.6 monospace fonts can have a fixed sub pixel width.
         // that's why we have to measure many characters
         // Note: characterWidth can be a float!
-        this.lineHeight = measureNode.offsetHeight;
-        this.characterWidth = measureNode.offsetWidth / 2000;
+        var size = {
+            height: measureNode.offsetHeight,
+            width: measureNode.offsetWidth / 2000
+        };
 
         this.element.removeChild(measureNode);
-
-        if (sibling) {
-            parent.insertBefore(this.element, sibling);
-        } else {
-            parent.appendChild(this.element);
-        }
+        return size;
     };
 
     this.setDocument = function(doc) {