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 size.
Your browser determines and exposes your screen resolutions,
but there is no way to be very sure about your monitor size without explicitly selecting it.
So, when you select your monitor size,
this page recalibrates the above ruler and the result is an accurate ruler in its actual size.
For more information about lenght units, see the official w3.org spec sheet.
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.