Scroll-meter prototype homepage

Scrolling is an achievement! Be proud of your metrics!
How can we grasp physical world units on screens? How can I print a centimeter on the screen. How can I make sure the centimeter will remain a centimeter across all types of screens?

We know screens are just grids of pixels, but what is less easy is to find out how many pixels are on the panel. If you know the physical measurements of the screen, and the screen resolution in pixels, then we can work out the pixel density. Reminiscents of the print world call this number PPI, points per inch, in this case pixels per inch, effectively the same notion.

pixels per inch

If we know a screen's PPI, (in my case I'll rather a PP-centimeter) we can make rules to draw and display real centimeters. Keep in mind that this won't ever be perfectly precise, grids of pixels in pannels don't constrain to a rhythmical finish, and we can't exactly turn halfs or quarter pixels on or off.

use case: my personal laptop screen. My laptop has a 'wide screen' (13.6"x7.6"), and resolution is 1366x768 pixels, 1366 / 13.6 = 100.44 PPI. Granted, you could also simply search for your exact device online and discover your PPI this way

theoretical usage

So the rule would look like this



notions that need defining:


CSS pretends

CSS does have cm, inches, points and picas, all physical world set units, but they never worked out. Next are three css only examples, on css inch, one css centimeter, and one css pixel.

Actual Size Ruler

Your browser does not support the canvas element.

Real size onscreen Ruler

Adjustable (draggable) online vitrual ruler that can be adjusted to an actual physical work size.

Adjusting this virtual ruler to actual size

Select an object out of the list that you can lay your hands on.

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

Dragging ruler adjuster left or right to fit the size of the reference, remember to save the setting for next time, after save the setting, refresh your brower to check the result. On the most popular browsers you can press the F5 key or click on the refresh button.