Most "online ruler" pages look simple: draw a rectangle, add centimeter ticks, add inch ticks, done.

That works only if every screen maps CSS pixels to real-world size in the same way. They do not.

A 13-inch laptop, a 27-inch external monitor, a phone, a tablet, and a 4K display can all render the same CSS width with different physical sizes. Browser zoom, operating-system scaling, Retina-style display modes, and external monitors all make the problem worse.

So I built a small browser-based ruler where the main feature is not the drawing. The main feature is calibration.

You can try the finished version here: Free Online Ruler - Actual Size cm and Inch Ruler

That is the only link in this post.…