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

The evolution of the design of a web-site
Step by step for how a fantastic web-design goes straight to hell. Hilarious (and so sadly true).
The design process
Those Gantt charts look great when put up on the projector during a team meeting - but does it ever go to plan... of course not!
IE9 preview 3
Microsoft are doing a great job coming up with the goods in IE9. Better SVG, Canvas (hardware accelerated), faster Javascript - nice! A good time to be a web-dev (although we still need to get people off IE6/7!)
CSS clac()
This is great news for anyone who wants to do something like 100% - 12px (which lets be honest most designers / developers working with CSS have). Hopefully Webkit and Opera will match Mozilla in implementing this soon.
Software is hard
One of the key problems in developing software is that there is no definitive end point - there is always "one more thing". This article is well worth reading if you have even been involved in a software project which has run over budget and late (every s
sugru
Hardware hacking. As they say, people like hacking (it applies to more than just code), and this new material looks like a great way to fix things, and have fun with.

Donate

If you find the software on this site useful, and/or enjoy using it, please consider assisting my beer fund as a way of thanks!.