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

The web today

The simple things
There are always two ways to look at everything - often its the company v the consumer (should not be - but that is how it often is). A milk jug which is difficult to pour... oh dear
Flexible layouts
This is an excellent article arguing for flexible layouts, which are typically quite difficult to implement and design. The rewards can be worth it though
Dragonfly Alpha 2
The Opera Dragonfly team appear to have been hard at work building up their developer tools. On-the-fly style changes is particularly nice to have. Nice work guys
Full service
There are a number of interesting things we can take away from this story, particularly the fact that users like to do things themselves - the feeling of accomplishment
CSS variables
This is something that CSS developers have been waiting for - and it is now in the Webkit nightlies! Nice one

Donate

If you find the software on this site useful, and/or enjoy using it, please consider making a donation so I can keep developing this software.