• Skip to main content

Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

  • Forums
  • About
  • Contact
MENUMENU
  • Blog Home
  • AWS, Azure, Cloud
  • Backend (Server-Side)
  • Frontend (Client-Side)
  • SharePoint
  • Tools & Resources
    • CM/IN Ruler
    • URL Decoder
    • Text Hasher
    • Word Count
    • IP Lookup
  • Linux & Servers
  • Zero Code Tech
  • WordPress
  • Musings
  • More
    Categories
    • Cloud
    • Server-Side
    • Front-End
    • SharePoint
    • Tools
    • Linux
    • Zero Code
    • WordPress
    • Musings
Home » Tools & Resources » Actual Size Online Ruler

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.


Sorry you cannot view the ruler because your browser does not support the canvas element. Please update your browser.

Graduation of an inch:   ”
 

Save the pixels per inch (PPI) according your own device, then you can use this next time.

Pixels per inch :


Is your display different? If so, select your screen dimension:  

Enter your display’s diagonal dimensions:     inches

Enter your display’s aspect ratio:   :


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:

  1. Screen resolution and
  2. 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:

  1. JavaScript must be enabled in your browser.
  2. 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.
  3. 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:

  1. Spread the word! Use these buttons to share this link on your favorite social media sites.

    Help me share this on . . .

    • Facebook
    • Twitter
    • LinkedIn
    • Reddit
    • Tumblr
    • Pinterest
    • Pocket
    • Telegram
    • WhatsApp
    • Skype
  2. Sign up to join my audience and receive email notifications when I publish new content.
  3. Contribute by adding a comment using the comments section below.
  4. Follow me on Twitter, LinkedIn, and Facebook.

Reader Interactions

Comments

  1. Chinoms says

    September 22, 2014 at 4:16 am

    This is cool! I can’t help but be enthralled by your skills each time I read your technical posts.

    Reply
    • Ehi Kioya says

      September 22, 2014 at 9:07 am

      Thanks Chinoms 🙂

      Reply
  2. Emma says

    November 25, 2016 at 6:06 pm

    Very handy, thanks 🙂

    Reply
  3. Ola says

    April 5, 2017 at 4:53 pm

    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.

    Reply
    • Ehi Kioya says

      April 5, 2017 at 5:09 pm

      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?

      Reply
  4. cor says

    August 31, 2017 at 3:38 pm

    hit ctrl + or – and theres a big change…

    Reply
    • Ehi Kioya says

      August 31, 2017 at 3:49 pm

      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).

      Reply
  5. Emmanuel Fuentes says

    August 1, 2018 at 2:48 pm

    Can I use the code? need it for my website.

    Reply
  6. Mrs W. Hicks says

    September 14, 2018 at 5:56 pm

    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.

    Reply
    • Ehi Kioya says

      September 14, 2018 at 6:50 pm

      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.

      Reply
  7. Luke says

    September 27, 2018 at 1:57 am

    Doesn’t work ! Ok fine, it works amazingly!

    Reply
  8. jerome says

    October 16, 2018 at 11:37 am

    this is really nice. you did a fine job on it. Thank you.
    Jerome

    Reply
  9. Mistie Prager says

    December 19, 2018 at 4:19 pm

    I got what you intend,saved to favorites, very decent website .

    Reply
  10. Jxs says

    December 24, 2018 at 9:48 pm

    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.

    Reply
    • Ehi Kioya says

      December 25, 2018 at 8:38 am

      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 🙂

      Reply
  11. anonymus says

    August 21, 2019 at 3:07 am

    @Emmanuel Fuentes: Probably NO, its plagiarism and you need to be creative. So think of a way to do what Ehi did, but in your own way.

    Reply
    • anonymus says

      August 21, 2019 at 3:08 am

      this one was for Emmanuel Fuentes

      Reply
  12. ROLADN says

    October 18, 2019 at 8:51 am

    Used this to measure my phone’s diameter on screen

    Tnx !

    Reply
  13. Kelly says

    November 20, 2019 at 8:43 pm

    I struggled to get it to work at first until I realized I had my browser settings at 150% because I struggle to read small print. The ruler is useful for quick reference. I appreciate it. Thank you.

    Reply
    • Ehi Kioya says

      November 20, 2019 at 9:05 pm

      You’re welcome Kelly. Great to hear you were able to get it working for you!

      Reply
  14. Karen says

    January 23, 2020 at 1:56 pm

    What a neat tool!
    I used this to get an idea of the size of a travel alarm clock offered on Amazon (which turned out to be much too big). While I have a really good mental sense of how big an inch or two are, it’s horribly inaccurate for anything larger than that. 3 1/2 inches for a travel clock is enormous.
    Thank you for providing this. 🙂

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Forums
  • About
  • Contact

© 2021   ·   Ehi Kioya   ·   All Rights Reserved
Privacy Policy