RulersGuides.js: Photoshop-inspired Web Design Helper Tool

The ruler and the possibility to draw auxiliary lines are indispensable features of Photoshop and other image editing and drawing applications. Why only Photoshop and such? Measuring distances and checking orientations via auxiliary lines can be helpful on a website as well. RulerGuides.js comes to your rescue. It adds a ruler with the mentioned features to any website via a bookmarklet.

RulersGuides.js: Features Known from Photoshop

To be able to use RulersGuides.js, the JavaScript has to be set up as a bookmarklet in the browser. Once done it displays a Photoshop-like ruler on any website when the bookmarklet is clicked. The units of the ruler are in pixels solely. This does not surprise you, does it? X and Y Coordinates as Well as Width and Height of the Drawn Rectangles Horizontal and vertical auxiliary lines can now be drawn with the help of the ruler and then stick to the website. More features are available from a menu. When using auxiliary lines to measure distances, sizes and positions, the function „Show detailed info“ can be very useful. It shows the x and y coordinates as well as width and height of every rectangle drawn with the ledger lines.

Different Presentation Options

By default, the rulers are tied to the upper left border of the HTML document. Thus, the horizontal ruler disappears when scrolling down. The option „Unlock rulers“ loosens them from their fixed position so that they are always visible. It's also possible to fade the rulers and ledger lines in or out independent from each other. Of course, you can also delete all lines at once.

Aligning Auxiliary Lines with DOM Elements

The function „Snap to DOM“ cares for a precise placement of the ledger lines. Here, the lines are always aligned with the outer borders of the DOM elements. This way, they can be placed so precisely that they enclose a particular element, for example, a „<p>“ or a „<section>“ area. Alternatively, it is possible to place the lines in fixed distance to each other. For example, they can be placed every 100 pixels from above and every 50 pixels from the left. This way, grids can be built quickly.

RulersGuides.js: Save Auxiliary Lines for Later Use

As soon as a page is refreshed, the lines disappear. However, the bookmarklet lets you save all placed lines. They can then be recreated and displayed from a menu. The lines are always saved per domain. Saved lines can only be used within a single project and not on different websites.

Bookmarklet for all Browsers or IE specifically

The bookmarklet RulersGuides.js is available in two versions. One supports Internet Explorer starting from version 7 (however, without the option to save the ledger lines) and the other variant supports all modern browsers.

Conclusion

RulersGuides.js is distributed under the terms of the liberal MIT license that allows free usage for private and commercial purposes, even in customer work. A short guide to the controls, in which the key combinations to access the different features are included, is available as well. (dpe)