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. The rest is the technical reasoning behind the tool. The core problem: CSS pixels are not physical pixels When a page says: width : 100 px ; Enter fullscreen mode Exit fullscreen mode the browser does not promise that the result will be the same number of millimeters on every screen.…