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'):
- 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
Subtle reality Interesting article which looks at how a UI design can be crafted to be more realistic, a key point in engaging your users
Increase your creativity Nice "trick" to get the two sides of your brain talking (or so the theory goes). Time for a game of pong...
Firefox Mobile 1.0 Congratulations to the team working on Firefox Mobile. Given that Webkit completely rules the roost for mobile browsers, it is nice to see some competition.
Team v Ideas What does a mediocre team do with a great idea - now contrast that to what a great team does with a mediocre idea? Which would you prefer - the latter of course. Great article.
Google dropping IE6 support The BBC are reporting that from March 1st, Google will be dropping support for IE6 in many of its applications. Good news!
Realism in UI Design In his article Lukas Mathis calls "Understanding Comics" (Scott McCloud) required reading - this article is on an equal pegging. Very interesting, very informative.
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!.