A bookmarklet to add some basic lines for alignment.
[∟ Ruler](javascript:(function ($) %7B%0A var styles = '%5C%0A .horizontal-ruler %7B%5C%0A height: 20px;%5C%0A width: 100%25;%5C%0A position: fixed;%5C%0A left: 0;%5C%0A top: 10px;%5C%0A cursor: row-resize;%5C%0A z-index: 10000;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A .horizontal-ruler:after %7B%5C%0A display: block;%5C%0A content: "";%5C%0A border-bottom: solid 1px;%5C%0A position: relative;%5C%0A top: 5px;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A .vertical-ruler %7B%5C%0A width: 20px;%5C%0A height: 100%25;%5C%0A position: fixed;%5C%0A left: 10px;%5C%0A top: 0;%5C%0A cursor: col-resize;%5C%0A z-index: 10000;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A .vertical-ruler:after %7B%5C%0A display: block;%5C%0A content: "";%5C%0A border-right: solid 1px;%5C%0A position: relative;%5C%0A left: -5px;%5C%0A height: 100%25;%5C%0A -webkit-user-select: none;%5C%0A %7D%5C%0A body %7B-webkit-user-select: none;%7D%5C%0A ';%0A%0A var RIGHT_ARROW = 39;%0A var LEFT_ARROW = 37;%0A var DOWN_ARROW = 38;%0A var UP_ARROW = 40;%0A var ESC = 27;%0A%0A var RulerDirections = %7B%0A VERT: 'VERT',%0A HORIZ: 'HORIZ'%0A %7D;%0A%0A var RulerHandler = function(ruler, direction) %7B%0A this.ruler = ruler;%0A this.direction = direction;%0A this.dragging = false;%0A this.bindEvents();%0A %7D;%0A%0A RulerHandler.prototype.bindEvents = function () %7B%0A var self = this;%0A this.ruler.on('mousedown', function (e) %7B%0A self.onMouseDown(e);%0A %7D);%0A $(document).on('mouseup', function (e) %7B%0A self.onMouseUp(e);%0A %7D);%0A