Usage

Using Rule is extremely simple:

• Drag the Rule link below to your bookmark bar (or add it to your standard bookmarks by right clicking the link and selected 'Add to bookmarks/favourites'):
  
• Load any web-page you want
• Click Rule in your bookmark bar
• Use and configure Rule to assist with your layout

It is often very useful for both web-designers and web-developers to be able to both measure out and mark up a design's layout. Traditionally this will be done in a desktop application such as Photoshop and then sliced up into the intended web-site. However, once the site is at that point in the development cycle, these design tools are just as important, if not more so, to ensure that nothing is lost from the original design. There are few if any tools which allow this to be done in a web-browser and Rule is designed to fill this gap.

Rule has all the features you would expect from the rulers in Photoshop or any other desktop graphics program including:

• Guides - with snap to block layout elements
• Origin location change
• Full colour control

Guides are an often invaluable in assisting layout, particularly when designing to a particular grid. To draw a new guide on the page, click in either the vertical or horizontal ruler and drag the mouse across the page. A tooltip will show next to the cursor giving information about the position of the guide. One of the most useful features of the guides in Rule is that they can snap to layout elements in your web-page. When a guide is dragged near a block level element it will automatically 'snap' to that coordinate, just as you would expect in a desktop application. When this happens the tooltip will show extra information, detailing the ID and class if available, along side the node type. Snap can be enabled and disabled from the Rule control panel (accessed by clicking the question mark icon at the top of the vertical ruler).

Although web-page designs often have their origin in the top-left of the browser canvas, there are many (such as this one) which are located in the center, or off center etc. For this reason you may wish to change the location of the origin in Rule to assist in your measurements. To do this, click in the 'origin' icon at the top of the vertical ruler and drag the mouse across the page to where you wish the new origin to be. A tooltip will show, giving details of the cursor position, relative to the current ruler origin.

Since Rule can be displayed over any web-site, it is important to have complete colour control over the various display colours, such that it can always be easily distinguished from other page elements. Both colour and opacity can be changed for the ruler background, the ruler tick marks and the guides. These controls are accessed by clicking on the question mark icon at the top of the vertical ruler.

In addition to these features, Rule will always remember the settings that you last used on a particular web-site. Therefore, if you are making minor CSS changes, you can simply reload the page, add Rule, and your guides etc will all be restored.

Future work

Rule is currently pre 1.0 software, and will be released as 1.0 along side Grid once I've stabilised their respective code bases. It is reasonably likely that you might find a bug or perhaps a web-site which doesn't work with Rule. If you do, please report them to me. Likewise, please get in touch if you have any ideas for enhancements which could make Rule even better, or even just tell me if you've used it and what you think of it!

One of the major things to be done in Rule is optimisation. Rule is a reasonably complicated piece of software, although I believe (and hope) that I've kept it's interactions as simple and intuitive as possible. Rule does some seriously intensive DOM manipulation, and although the new generation of web-browsers do an excellent job of speeding up DOM access, I believe I can make Rule quite a bit faster in future.

Supported browsers

The following browsers are supported in Rule:

• Internet Explorer 7
• Firefox 2+
• Safari 2.0.4+
• Opera 9.2

These are exactly the same as Grid, and there is no IE6 support for exactly the same reason as before.

Credit

Much credit must go to Dan Roback for making me believe that a snap mechanism would not only be possible in Rule, but would also be very effective. Dan also deserves thanks for extensively testing Rule, ensuring that it is stable enough for deployment - thank you!