Actual Size Online Ruler
This actual size online ruler is powered by HTML5 and JavaScript. It uses the canvas element.
The “image” you see below is technically not an image. It is dynamic and adjusts/calibrates itself based on the options you select below.
Is your display different? If so, select your screen dimension:
Why You Should Enter Your Screen Dimensions (Diagonal Screen Size)
In order to display a ruler in its actual size, two details should be known:
- Screen resolution and
- Monitor (or display) size
Your browser determines and exposes your screen resolution, but there is no way to be very sure about your monitor size (or the screen size of your phone or tablet) if you don’t explicitly select it. The device size supplied by your browser may not correspond to the real size of your device in many practical cases. It is merely proposed as an approximate value for consideration. The reason for this has to do with browser and operating system constraints. Technically speaking, there is really no way for the operating system running on a device to tell what the physical screen dimensions of the device are and so, there is no way for any program (like a browser) running on that operating system to tell the exact screen dimensions either. And if the browser doesn’t know the physical screen dimensions, it is not possible for something running inside the browser (in this case JavaScript) to know the physical screen dimensions either.
However, as earlier mentioned, your operating system does give us an “educated guess” about the physical screen size. This value is what is used to display this ruler the first time you visit this page. Depending on the class and type of your device, the error in the original screen size value reported by your operating system may vary from a few millimeters to several centimeters (or even up to a full inch). This is why I strongly recommend that you manually calibrate this ruler using the options provided above.
If you don’t know the value of the diagonal screen size of your device, in most cases you can quickly Google the information by searching with your device’s model name. Alternatively, if you have the original technical documentation of your device handy, you could refer to it. Technical documentations usually include device screen size (diagonal size) information.
Now, when you have selected your display size, this page recalibrates the above ruler and the result is an accurate ruler in its actual size.
If, however, you’re not after high accuracy, you can go ahead and work with the default ruler that this page displays on your screen. Just be aware that measurements you make using the default ruler should only be considered as quick and dirty approximations.
More Information About The Actual Size Online Ruler
Use this on-screen/online ruler to measure the size of an object in centimeters or inches when you have no real ruler at hand, or when a real ruler isn’t good enough for some reason (the real ruler might be too short or might not have the exact markings you need).
This actual size online ruler works on any device that allows you to browse the web – so you can use it on large screens (PC monitors, laptops, or smart TVs) and mobile devices (smartphones, tablets, phablets, and maybe even e-ink readers).
One really cool and unique feature of this virtual on-screen ruler is that it has no maximum length! It extends to fill out any screen width. So, even if you have an exceptionally wide screen (like a huge smart TV), this ruler extends to fill out the screen and continues to work accurately.
Requirements/Prerequisites To Use The Actual Size Online Ruler
Besides the clearly explained calibration requirement discussed above, in order to use this actual size on-screen ruler, the following prerequisites and requirements must be met:
- JavaScript must be enabled in your browser.
- Your browser must support the HTML5 canvas element. Most modern browsers now support the canvas element. If you can see any ruler “image” above, it means your browser supports this and you’re good.
- Your browser should be at its standard/default page scale adjustment. As pointed out by a commenter below, if you zoom in or zoom out your browser (by pressing Ctrl+ or Ctrl-), the ruler scale will stretch or shrink along with other elements on the page that are subject to transformation when scaling. This is completely normal browser behavior and while I could technically disable zooming on the page using code, I decided to not do this because, in order to meet accessibility and usability standards, users SHOULD be allowed to zoom. So if you want to get accurate results, just don’t use Ctrl+ or Ctrl- (leave your browser at its default zoom level of 100%).
Feedback And Support
If you need any help using this ruler, just send me a quick note via the comments sections. I’m almost always online.
I also encourage and welcome feature suggestions and bug reports (if any).
For more information about length units, see the official w3.org spec sheet.
Found this Online Ruler useful? Want to show your appreciation? Here are some options:
- Spread the word! Use these buttons to share this link on your favorite social media sites.
- Enter your email and press “Go” to subscribe to my notifications. That way, you’ll never miss my updates.
- Contribute by adding a comment using the comments section below.
- Follow me on Twitter, LinkedIn, and Facebook.
This is cool! I can’t help but be enthralled by your skills each time I read your technical posts.
Thanks Chinoms 🙂
Very handy, thanks 🙂
Hello just wanted to give you a quick heads up. The words in your content seem to be running off the screen in IE.
I’m not sure if this is a formatting issue or something to do with internet browser compatibility but I thought I’d post to let you know. The design looks great though!
Hope you get the problem solved soon. Many thanks.
Hi Ola. Thanks for your comment. However, I can’t reproduce your issue in Internet Explorer (IE). Is your browser using the full-width of your computer screen? Can you send a screenshot?
hit ctrl + or – and theres a big change…
Thanks for pointing that out. While I could technically disable zooming on the page using code, to meet accessibility and usability standards, users SHOULD be allowed to zoom. So if you want to get accurate results, just don’t use Ctrl+ or Ctrl- (leave your browser at it’s default zoom level).
Can I use the code? need it for my website.
Well now, this is brilliant ! l am away on holiday with my knitting but no tape measure and just needed a approximate measurement for the top of the bed socks I am making. Many Thanks. Wendy.
Hi Wendy,
It’s so good to see the different use cases people find for this. I’m happy to know you found it useful.
Ehi Kioya.
Doesn’t work ! Ok fine, it works amazingly!
this is really nice. you did a fine job on it. Thank you.
Jerome
I got what you intend,saved to favorites, very decent website .
Great job. I’ve also made my version of online ruler. Must admit that using canvas, as in your ruler, seems like a more flexible solution.
Hi Jxs,
Thanks! I completely agree with you on your point about using a canvas element for an actual size on-screen ruler. There have been multiple attempts to create actual size screen rulers using more traditional HTML elements (like divs for example). But these all come with lots of issues and they usually have very limited versatility. The HTML5 canvas element was designed specifically for cases like this so it does the job perfectly.
I’m probably biased (since this is my own creation), but so far, I have not yet seen a better implementation of an actual size online ruler than this one 🙂