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
So the rule would look like this
- in a css preprocessor variable definition sheet :
var ppi = 100.44;
var ppcm = (ppi * 2.54 /* 1 cm = 2.54 in */);
var realcm = ppcm
then in use :
width: (10*realcm) px;
notions that need defining:
- physical pixels
- dips, device independent pixels
- device pixel Ratio
CSS pretendsCSS 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
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.
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.