Règle en Ligne
We created Online Ruler to solve a fundamental challenge in modern web technology: providing mathematically verified, physically accurate 1:1 scale measurements on any digital screen.
1. The Origins: Dispelling the 96 DPI Myth
In the 1990s, early desktop operating systems and W3C CSS specifications codified a standard assumption: computer monitors render content at 96 dots per inch (DPI) (or 72 DPI on legacy Macintosh systems). Under this obsolete baseline, 1 CSS inch was locked to 96 CSS pixels.
Today, display hardware has radically transformed. From 4K OLED monitors and Retina screens to high-density mobile devices like iPhone 16 Pro (460 PPI) and Samsung Galaxy S24 Ultra (505 PPI) — real hardware pixel densities range from 92 to over 500 PPI.
The Critical Accuracy Challenge:
If a virtual ruler renders a 10 cm scale assuming 96 DPI on a laptop screen with 141 PPI, the displayed ruler will be 31.4% smaller than physical reality. Placing a real coin or component against that screen yields severe measurement error.
Online Ruler was engineered to eliminate this error entirely. Combining automatic device detection, sub-pixel HTML5 Canvas rendering, and multiple calibration standards, we transform any browser window into a calibrated precision tool.
2. Physics and Mathematics of Screen Calibration
To render an exact physical millimeter or inch, our rendering engine calculates the exact pixel pitch using three mathematical vectors:
AScreen Diagonal Geometry (Pythagorean Theorem)
When you specify your display diagonal in inches (e.g. 14.0", 15.6", 24.0", 27.0"), our algorithm computes hardware PPI from viewport resolution:
This calculation accounts for aspect ratios (16:9, 16:10, 21:9, 4:3) and computes pixel pitch with sub-millimeter precision.
BReference Object Calibration (ISO/IEC 7810 ID-1 Standard)
Almost everyone carries an international geometric standard in their pocket: a debit or credit card, ID, or driver’s license. Under the ISO/IEC 7810 ID-1 standard, payment cards are manufactured to exacting tolerances:
- Width: Exactly 85.60 mm (3.370 inches)
- Height: Exactly 53.98 mm (2.125 inches)
- Corner radius: Exactly 3.18 mm
Matching your card to the on-screen guideline yields calibrated accuracy within ±0.1–0.2 mm without needing a physical tape measure.
CDatabase of 220+ Predefined Devices
Our built-in database includes factory specifications for Apple iPhone, iPad, Samsung Galaxy, Google Pixel, Xiaomi, MacBook, and popular monitors for instant one-click calibration.
3. Sub-Pixel Canvas 2D Engine with High-DPI Support
High-density displays use a device pixel ratio (window.devicePixelRatio) typically between 2.0x and 3.5x.
Online Ruler uses a dual-buffer vectorizer with hardware scaling to deliver razor-sharp ticks at 1 physical pixel width, smooth 60fps responsiveness, and floating-point fractional marks.
- Canvas buffer multiplied by full device pixel ratio (DPR) for crisp rendering.
- Sub-pixel floating-point math for mm, cm, and 1/16" inch divisions.
- Hardware-accelerated requestAnimationFrame rendering pipeline.
4. Architectural Design Principles
Blazing Fast Astro MPA
Instant page loads under 100ms with zero heavy client bloat and optimal SEO.
100% Client-Side Privacy
No tracking, no account required. All calibration data stays stored in your browser localStorage.
Universal Cross-Platform
Optimized for smartphones, tablets, laptops, and ultra-wide desktop monitors.
Open Digital Metrology
Free educational guides, unit conversions, and calibration standards for everyone.
5. Project Evolution & Feedback
We continuously expand our device catalog as new phones and displays launch. Share calibration feedback or suggest devices via our contact form.
Editorial & Engineering Team at Online Ruler
Open Digital Metrology Initiative · https://onlinelineyka.com