RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page

To create a guide, click the vertical or horizontal ruler and drag-n-drop it somewhere outside the ruler

It is possible to open/save created guides as grids using corresponding hotkeys (Note: grids will be saved on a page location basis, so it's not possible to use the same grids in another browser window/tab)

Rulers can be locked, so that one of the rulers will scroll along the page and the other will be always visible

Guides can be snapped to defined number of pixels

Detailed info mode is available, which shows position and size of regions created by the guides.

Guides can be snapped to DOM elements (experimental, use with caution, can be slow or unresponsive on pages with lots of elements)

Keyboard controls:

• Toggle rulers Ctrl + Alt + R
• Toggle guides Ctrl + Alt + G
• Toggle rulers and guides Ctrl + Alt + A
• Lock/unlock rulers Ctrl + Alt + L
• Toggle detailed info Ctrl + Alt + I

• Clear all guides Ctrl + Alt + D
• Save grid dialog Ctrl + Alt + S
• Open grid dialog Ctrl + Alt + O
• Open Snap to dialog Ctrl + Alt + C
• Toggle snap to DOM Ctrl + Alt + E

RulersGuides.js is available as a bookmarklet, you can click or bookmark it as Rulers&Guides for non-IE users and Rulers&Guides for IE users

Clicking the link or bookmark deletes the rulers and all the guides or starts from the scratch

Source code is available at https://github.com/mark-rolich/RulersGuides.js

Developed by Mark Rolich © 2013

Licensed under the MIT license