Take Pixel Perfect Measurements With The Ruul Onscreen Ruler [Chrome]

Ads by Google

ruul intro   Take Pixel Perfect Measurements With The Ruul Onscreen Ruler [Chrome]Remember the times when a ruler was an essential part of our student kit. These days we probably use it for tearing papers neatly rather than measuring anything’s length or breadth. But rulers aren’t meant for the dustbins yet; they still have real world applications in the digital world. Onscreen rulers are important developer tools. Web designers use it to keep everything pixel perfect and lay out things symmetrically on a webpage.

But even the layman has uses for an online ruler. You can use it to measure the dimensions of an image and check if its size if right for you (profile pictures for example). You can use it to measure any object on your screen and get an idea of its scale relative to another object. You can create printouts of prescribed sizes by measuring exact sizes.

I am sure you can figure out a few more practical uses as we download and use the dead simple Ruul on Chrome.

An Onscreen Ruler for Chrome

Ruul is neat little online ruler that’s available for Chrome. It is listed as a developer tool on the Chrome Web Store, but I think you can spot a few more uses for it because it comes with some little touches wrapped in a simple package. Let’s look into some of its features.

Ruul gives you a few colorful ruler choices. There are seven right now, with more expected soon. They are all functionally same with a few being long rulers.

Ads by Google

ruul01   Take Pixel Perfect Measurements With The Ruul Onscreen Ruler [Chrome]

Ruul measures in pixels and picas. These two are units of measurement for images and typographic elements respectively. A pica is 1/6th of an inch.

The rulers are ‘draggable’. You can align them vertically or horizontally and drag them around to the precise locations on any webpage. You can use as many rulers as you want on a page. Ruul is also supposed to have positional memory i.e. it should remember where it was placed on a page the last time and if you turn on the same ruler, it will appear at the exact same spot it was in previously. You can turn-on and turn-off the rulers with a click on the trash icon.

ruul02   Take Pixel Perfect Measurements With The Ruul Onscreen Ruler [Chrome]

The Drop Down Overlay is the tool which you will use most often if you want to measure text sizes, stoke widths, and line heights. A click on the ‘+’ opens the overlay, and then you can nudge the ruler with the keyboard or the mouse on top of the webpage element you want to measure. As you can see that instead of using guidelines for these, Ruul uses the more simple method of overlay. The simple method does not suffer because the guide tells you at a glance the right pixel dimensions.

ruul03   Take Pixel Perfect Measurements With The Ruul Onscreen Ruler [Chrome]

Ruul also works on any local files viewable in the Chrome browser. For instance, you can drag and drop a local graphic and check its dimensions. Though I don’t see why you would need to do so with an image file as a simple mouse-over gives you the pixel dimensions. You need to check ‘Allow access to file URLs’ within the extension’s preferences.

A User’s Observations

Ruul is functionally simple and does its job well when it comes to measuring any webpage element. But I wish the developer would have added a few more flourishes to make it the ultimate online ruler. The other ruler extension I have used is Measure It both on Chrome and Firefox. It enables us to draw out an overlay over the webpage element and measure the dimension (however large) more precisely. Of course, it does not have multiple ruler support. Ruul would have been more complete if it had been configurable with different units of measurements on the fly. Also, each ruler should be enabled to move independently with the keyboard. Right now, multiple rulers move together is you use the arrow keys. So, has to resort to the mouse.

These few gaps aside, Ruul is an uncomplicated onscreen ruler. If you are a web developer, you can choose to keep it in your ‘kit’. Do you? If not, which is an alternative you would suggest if at all?

Ads by Google

9 Comments - Write a Comment

Reply

Saurav Azad

wonderful article

Reply

Jeremiah Iliffe

Cool tool

Reply

Nikhil Chandak

downloaded it from the store
gonna check it out , how’s it
;)

Reply

Boni Oloff

Simple idea, but they make it seriously and complete, not just a simple onscreen ruler.. Great plugin.

Reply

Norbert Gruszfeld

what about ff?

Reply

Tan Nguyen Nhat

Wonderful app!

Reply

Ronald Burnham

Why does this add-on require:

1) Access to your data on all websites?

2) Access to your tabs and browsing activity?

Like the add-on, but didn’t install it because of the privacy issues. I just do not believe an add-on requires access to this information to function!

Reply

Rigoberto Garcia

Great article Saikat. I try it. Thanks…

Your comment