Joel’s Writings

When doing some web development work, I used to use Screenshot Plus to measure the width of some elements. While this Mac OS X widget is very handy, it wasn’t very appropriate for this job: it required me to load Mac OS X’s Dashboard, activate Drag a picture in the widget, drag around what I wanted to measure, and finally drop the screenshot which was just taken. I thought it was a complex way to simply measure things in a web page, but I also thought there should a much better way to do that, which would be far more integrated within the web browser.

How to use the Draggable Screen Ruler bookmarklet

Well, I was right, since this Draggable Screen Ruler bookmarklet actually does the job quite efficiently, while also giving some useful information such as absolute position in the window. I wrote it a few days ago, and I actually use it every time I work on web design with CSS. You just have to drag and drop the previous link to your bookmarks bar, and you will be able to measure anything from any website you visit. To deactivate it, simply double click with your mouse, or press any key on your keyboard. Isn’t it nice?

How it all works

In fact, the bookmarklet will simply retrieve this much bigger Javascript file over the internet, which means that you won’t be able to use it when your are not connected to the internet. But this also guarantees transparent updates in case I enhance it, or fix a bug in the javascript file.

However, there is a simple solution if you really want to use it without internet connectivity, provided that you have a local web server activated (which I assume you have if you are a web developer): just download the Javascript file, and put it somewhere on your computer, so that it is available at local address, such as http://localhost/path/to/scripts/Ruler.js; then replace the content of the variable called url in the bookmarklet code by this local URL, and you’re all set.

This bookmarklet has been tested only with Firefox 3.0 and Safari 3.1.2, and it worked perfectly with those two browsers.

Where the idea came from

Actually, this bookmarklet is not one of my ideas: I found this Draggable Screen Ruler made by Kevin C. Smith by chance, and I thought it was a very good idea, but I regretted a few things about the implementation.

For example, the original bookmarklet didn’t allow us to measure something, deactivate it, and then reactivate it clicking on the bookmarklet without reloading the web page. It turns out the main reason for that was the fact that everything was done with global javascript variables which status was not properly updated in this case, and that forced us to reload the page to measure something else when the bookmarlet had already been deactivated.

I also regretted that the colors of the elements in the info box of the ruler could change with some web pages, which would result in bad contrast and poor readability. And finally, I found the bookmarklet code very difficult to understand: variables have very short names which are not explicit at all…

So I decided to come up with my own version of the bookmarklet, a version which solves all those issues. I think it’s much easier to understand, and therefore easier to maintain. Of course, I left a reference to the original bookmarlet web page next to the copyright notice.

I hope you will like this nifty tool as much as I do!