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

Ads by Google

chrome on screen rulerRemember 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.

chrome on screen ruler

Ads by Google

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.

google chrome on screen ruler

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.

chrome on screen ruler

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?

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Google Chrome Mastery
Google Chrome Mastery
38 Members
Mozilla Firefox Fans
Mozilla Firefox Fans
32 Members
Graphic Design
Graphic Design
31 Members
Best Mobile Browsers
Best Mobile Browsers
27 Members
Safari Browser Tips
Safari Browser Tips
17 Members
Internet Explorer (IE) Tips
Internet Explorer (IE) Tips
4 Members
Ads by Google
Comments (9)
Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.