Fix FF 3.6 issue, where mono spaced characters can

have fixed sub pixel widths.

CursorLayer.js

@@ -50,8 +50,8 @@ CursorLayer.prototype.getPixelPosition = function() {
 CursorLayer.prototype.update = function(config)
 {
   if (!this.position) return;
-  
-  var cursorLeft = this.position.column * config.characterWidth;
+
+  var cursorLeft = Math.round(this.position.column * config.characterWidth);
   var cursorTop = this.position.row * config.lineHeight;
   
   this.pixelPos = {

MarkerLayer.js

@@ -50,9 +50,9 @@ MarkerLayer.prototype.update = function(config)
         html.push(
           "<div class='", marker.clazz, "' style='",
           "height:", config.lineHeight, "px;",
-          "width:", config.width - (range.start.column * config.characterWidth), "px;",
+          "width:", Math.round(config.width - (range.start.column * config.characterWidth)), "px;",
           "top:", (range.start.row-config.firstRow)  * config.lineHeight, "px;",        
-          "left:", range.start.column * config.characterWidth, "px;'></div>"
+          "left:", Math.round(range.start.column * config.characterWidth), "px;'></div>"
         );
       }
         
@@ -62,7 +62,7 @@ MarkerLayer.prototype.update = function(config)
           "<div class='", marker.clazz, "' style='",
           "height:", config.lineHeight, "px;",
           "top:", (range.end.row-config.firstRow) * config.lineHeight, "px;",
-          "width:", range.end.column * config.characterWidth, "px;'></div>"
+          "width:", Math.round(range.end.column * config.characterWidth), "px;'></div>"
         );
       };
       
@@ -86,9 +86,9 @@ MarkerLayer.prototype.update = function(config)
         html.push(
           "<div class='", marker.clazz, "' style='",
           "height:", config.lineHeight, "px;",
-          "width:", (range.end.column - range.start.column) * config.characterWidth, "px;",
+          "width:", Math.round((range.end.column - range.start.column) * config.characterWidth), "px;",
           "top:", (range.start.row-config.firstRow)  * config.lineHeight, "px;",        
-          "left:", range.start.column * config.characterWidth, "px;'></div>"
+          "left:", Math.round(range.start.column * config.characterWidth), "px;'></div>"
         );
       }
     }

TextLayer.js

@@ -30,11 +30,14 @@ TextLayer.prototype._measureSizes = function()
   style.position = "absolute";
   style.overflow = "visible";
     
-  measureNode.innerHTML = "X<br>X";
+  measureNode.innerHTML = new Array(1000).join("Xy");
   this.element.appendChild(measureNode);
   
-  this.lineHeight = Math.round(measureNode.offsetHeight / 2);
-  this.characterWidth = measureNode.offsetWidth;
+  // 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;
     
   this.element.removeChild(measureNode);
 };

VirtualRenderer.js

@@ -52,7 +52,7 @@ VirtualRenderer.prototype.draw = function()
   
   var longestLine = Math.max(
     this.scroller.clientWidth, 
-    this.doc.getWidth() * this.characterWidth
+    Math.round(this.doc.getWidth() * this.characterWidth)
   );
   
   var lineCount = Math.ceil(minHeight / this.lineHeight);
@@ -126,7 +126,7 @@ VirtualRenderer.prototype.scrollCursorIntoView = function()
   }
   
   if (this.scroller.scrollLeft + this.scroller.clientWidth < left + this.characterWidth) {
-    this.scroller.scrollLeft = left + this.characterWidth - this.scroller.clientWidth;
+    this.scroller.scrollLeft = Math.round(left + this.characterWidth - this.scroller.clientWidth);
   }
 },
 
@@ -136,7 +136,7 @@ VirtualRenderer.prototype.getScrollTop = function() {
 
 VirtualRenderer.prototype.scrollToY = function(scrollTop)
 {
-  var maxHeight = this.lines.length * this.lineHeight - this.scroller.offsetHeight;
+  var maxHeight = this.lines.length * this.lineHeight - this.scroller.clientHeight;
   var scrollTop = Math.max(0, Math.min(maxHeight, scrollTop));
   
   if (this.scrollTop !== scrollTop) {

editor.css

@@ -53,7 +53,7 @@
 }
 
 .text-layer {
-  font-family: Monaco, "Courier New";
+  font-family: Monaco, "Courier New", monospace;
   font-size: 12px;
   cursor: text;
 }

editor.html

@@ -39,7 +39,6 @@
 var editor = new Editor(new TextDocument("Juhu Kinners"), new VirtualRenderer("container"));
 
 window.onresize = function() {
-  console.log("resize");
   editor.resize();
 }