It is often useful for web-designers and developers to be able to measure a distance in a web-browser, either for design or locating a bug. Unit is a JavaScript bookmarklet which allows you to obtain the distance between any two points on a page.

Usage

Using Unit is extremely simple:

  • Drag the Unit link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selected 'Add to bookmarks/favourites'):
    Unit
  • Load any web-page you want
  • Click Unit in your bookmark bar
  • Click on the two points you wish to measure the distance between on the page

Have you ever held a piece of paper up to a web-page on a screen and marked off a particular measurement, to get some idea of the distance between two elements (particularly when trying to chase CSS differences between browsers)? I often find it exceptionally useful to measure the distance between two particular elements, and this is exactly what Unit is designed to do in a simple and fast manner.

Usage

To use Unit, load the JavaScript bookmarklet by following the instructions above. The simply click and drag between the two points you wish to measure the distance between on the page. A triangle with measurement rulers will be drawn over the page indicated the area being measured, and the Unit information panel will be updated with the measurement information. To then make a new measurement, click and drag on the page again.

Unit can be used in a similar manner to traditional desktop design tools for measurement, by holding the shift key to force the measurement to be on the horizontal, vertical or diagonal only. Releasing the shift key will allow Unit to resume its free ranging measurements.

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.

Revision history

Version 2.0

  • Redesigned the interface to be click and drag
  • Added 'shift' key detection for angular measurements
  • Dropped the node information display (this is the realm of the outstanding XRay!)

Version 1.0

  • First public release
Article image

Elsewhere on the web