Why Physical Calibration Is Essential
Standard web browsers operate in virtual CSS reference pixels, assuming a default density of 3.7795 CSS px/mm (96 CSS PPI). However, real physical displays vary significantly:
- A 24-inch 1080p desktop monitor renders at ~92–96 physical PPI (~3.62–3.78 px/mm).
- A 14-inch MacBook Pro display renders at 254 physical PPI (scaled to ~128 CSS PPI / ~5.04 px/mm).
- A modern smartphone display has 400+ physical PPI (scaled to ~140–160 CSS PPI / ~5.5–6.3 px/mm).
Because browsers cannot directly query the monitor's physical chassis size or active optical panel dimensions from the operating system, an uncalibrated ruler is an estimate. By aligning an on-screen outline to an ISO/IEC 7810 physical standard card (85.60 mm wide), the ruler calculates the true rendered CSS pixels per millimeter directly:
Direct Mathematical Scale Conversions
All ruler ticks, guides, and unit conversions derive directly from cssPxPerMm without rounding intermediates:
Zero-Data Client-Side Privacy
Your calibration data and guide coordinates remain strictly on your device inside localStorage. No measurement data is ever uploaded, and the entire app works offline once loaded.