add option to show the print margin

css/editor.css

@@ -14,6 +14,7 @@
   position: absolute;
   overflow-x: scroll;
   overflow-y: hidden;
+  height: 100%;
 }
 
 .editor .sb {
@@ -29,11 +30,17 @@
   left: 0px;
 }
 
+.editor .printMargin {
+  position: absolute;
+  height: 100%;
+}
+
 .layer {
   z-index: 0;
   position: absolute;
   overflow: hidden;  
   white-space: nowrap;
+  height: 100%;
 }
 
 .text-layer {

css/tm.css

@@ -15,6 +15,11 @@
   font-size: 12px;  
 }
 
+.editor .printMargin {
+  width: 1px;
+  background: rgb(191, 191, 191);
+}
+
 .gutter-layer {
   right: 10px;
   text-align: right;

src/ace/Editor.js

@@ -360,18 +360,32 @@ ace.Editor = function(renderer, doc) {
         return this.$highlightActiveLine;
     };
 
-    this.$showInvisibles = true;
     this.setShowInvisibles = function(showInvisibles) {
-        showInvisibles = !!showInvisibles;
+        if (this.getShowInvisibles() == showInvisibles)
-        if (this.$showInvisibles == showInvisibles) return;
+            return;
 
-        this.$showInvisibles = showInvisibles;
         this.renderer.setShowInvisibles(showInvisibles);
         this.renderer.draw();
     };
 
     this.getShowInvisibles = function() {
-        return this.showInvisibles;
+        return this.renderer.getShowInvisibles();
+    };
+
+    this.setShowPrintMargin = function(showPrintMargin) {
+        this.renderer.setShowPrintMargin(showPrintMargin);
+    };
+
+    this.getShowPrintMargin = function() {
+        return this.renderer.getShowPrintMargin();
+    };
+
+    this.setPrintMarginColumn = function(showPrintMargin) {
+        this.renderer.setPrintMarginColumn(showPrintMargin);
+    };
+
+    this.getPrintMarginColumn = function() {
+        return this.renderer.getPrintMarginColumn();
     };
 
     this.$readOnly = false;

src/ace/VirtualRenderer.js

@@ -13,7 +13,7 @@ ace.VirtualRenderer = function(container) {
     this.container.appendChild(this.gutter);
 
     this.content = document.createElement("div");
-    this.scroller.appendChild(this.content)
+    this.scroller.appendChild(this.content);
 
     this.gutterLayer = new ace.layer.Gutter(this.gutter);
     this.markerLayer = new ace.layer.Marker(this.content);
@@ -38,6 +38,7 @@ ace.VirtualRenderer = function(container) {
         column : 0
     };
 
+    this.$updatePrintMargin();
     this.onResize();
 };
 
@@ -60,6 +61,45 @@ ace.VirtualRenderer = function(container) {
         this.textLayer.setShowInvisibles(showInvisibles);
     };
 
+    this.getShowInvisibles = function() {
+        return this.showInvisibles;
+    };
+
+    this.$showPrintMargin = true;
+    this.setShowPrintMargin = function(showPrintMargin) {
+        this.$showPrintMargin = showPrintMargin;
+        this.$updatePrintMargin();
+    };
+
+    this.getShowPrintMargin = function() {
+        return this.$showPrintMargin;
+    };
+
+    this.$printMarginColumn = 80;
+    this.setPrintMarginColumn = function(showPrintMargin) {
+        this.$printMarginColumn = showPrintMargin;
+        this.$updatePrintMargin();
+    };
+
+    this.getPrintMarginColumn = function() {
+        return this.$printMarginColumn;
+    };
+
+    this.$updatePrintMargin = function() {
+        if (!this.$showPrintMargin && !this.$printMarginEl)
+            return;
+
+        if (!this.$printMarginEl) {
+            this.$printMarginEl = document.createElement("div");
+            this.$printMarginEl.className = "printMargin";
+            this.content.insertBefore(this.$printMarginEl, this.gutter.element);
+        }
+
+        var style = this.$printMarginEl.style;
+        style.left = (this.characterWidth * this.$printMarginColumn) + "px";
+        style.visibility = this.$showPrintMargin ? "visible" : "hidden";
+    };
+
     this.getContainerElement = function() {
         return this.container;
     };
@@ -79,7 +119,6 @@ ace.VirtualRenderer = function(container) {
     this.onResize = function()
     {
         var height = ace.getInnerHeight(this.container);
-        this.gutter.style.height = height + "px";
         this.scroller.style.height = height + "px";
         this.scrollBar.setHeight(height);
 
@@ -129,7 +168,7 @@ ace.VirtualRenderer = function(container) {
         var charCount = this.doc.getWidth();
         if (this.$showInvisibles)
             charCount += 1;
-            
+
         var longestLine = Math.max(this.scroller.clientWidth, Math.round(charCount * this.characterWidth));
 
         var lineCount = Math.ceil(minHeight / this.lineHeight);
@@ -143,21 +182,19 @@ ace.VirtualRenderer = function(container) {
             lineHeight : this.lineHeight,
             characterWidth : this.characterWidth
         };
-        
+
         this.content.style.marginTop = (-offset) + "px";
 
         for ( var i = 0; i < this.layers.length; i++) {
             var layer = this.layers[i];
 
             var style = layer.element.style;
-            style.height = minHeight + "px";
             style.width = longestLine + "px";
 
             layer.update(layerConfig);
         };
 
         this.gutterLayer.element.style.marginTop = (-offset) + "px";
-        this.gutterLayer.element.style.height = minHeight + "px";
         this.gutterLayer.update(layerConfig);
 
         this.$updateScrollBar();