Draggable Screen Ruler for Web Development January 25, 2009
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
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.
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!