When using an on-screen web ruler at true 1:1 scale, the single most critical step is calibration (display PPI adjustment).
No matter how well-engineered an online measuring tool is, if the software's pixel density assumption does not match your physical display's hardware pixel pitch, reading errors will occur. In this guide, we explain why browser auto-detection alone has limitations, provide official dimensions of standard calibration items, break down the PPI math, and explain how to calibrate in 30 seconds.
1. Why Automatic Browser Detection Isn't 100% Sufficient
Modern web browsers enforce strict security and fingerprinting mitigations. Because of this, there is no standard Web API that reveals the physical diagonal size (in inches or millimeters) of a user's monitor.
Browsers only report:
- Logical resolution (e.g. 1920 × 1080 CSS pixels)
- Device Pixel Ratio (
window.devicePixelRatio, e.g. 1.0, 2.0, 3.0) - Viewport width and height
For example, a 21.5-inch Full HD monitor (~102 PPI) and a 27-inch Full HD monitor (~82 PPI) report the exact same resolution (1920 × 1080), yet the physical size of each pixel differs by more than 20%! Furthermore, OS-level display scaling (Windows 125% or 150%) alters CSS pixel metrics.
This is why calibrating with a standardized physical object (like a coin or credit card) is the only foolproof method to guarantee sub-millimeter accuracy.
2. Official Dimensions of Standard Calibration Objects
| Item | Official Dimensions | Thickness | Why Recommended |
|---|---|---|---|
| 1-Yen Coin (Japan) | Diameter 20.0 mm | 1.5 mm | Strict legal Mint tolerance. Fits comfortably on narrow smartphone screens. Best choice in Japan. |
| 100-Yen Coin (Japan) | Diameter 22.6 mm | 1.7 mm | Readily available in pockets and wallets. |
| 500-Yen Coin (Japan) | Diameter 26.5 mm | 1.8 mm | Large bi-color coin with distinct outer rim. |
| Credit Card / Transit IC Card | 85.60 mm × 53.98 mm | 0.76 mm | International standard ISO/IEC 7810 ID-1. Calibrates a wide ruler span instantly. |
| 1,000-Yen Banknote | 150.0 mm × 76.0 mm | - | Ideal for wide desktop screens and tablets. |
| 1 Euro Coin (EU) | Diameter 23.25 mm | 2.33 mm | Standard European calibration coin. |
| US Quarter (25¢) | Diameter 24.26 mm | 1.75 mm | Standard North American calibration coin. |
3. Step-by-Step Calibration Instructions
【Calibration Workflow】
1. Tap "Calibrate with Real Object" on Jougi Online toolbar
2. Select your object (e.g. "1-Yen Coin (20.0mm)" or "Credit Card")
3. Rest your physical item directly over the blue on-screen guide
4. Use slider for coarse tuning, then tap "+" and "-" for 0.1mm micro-steps
5. Click "Save this Calibration" to store settings in localStorage
Pro Tips for Precise Alignment
- Vertical Card Mode for Phones: Smartphone screens are often only 68–72 mm wide. Tap the "Rotate Card" button to calibrate along the card's 54.0 mm short edge so the card doesn't overhang your phone.
- Inspect from Directly Overhead (90°): Always look perpendicular to the screen to eliminate glass parallax error.
4. The Math Behind Display PPI Calculation
Behind the scenes, Jougi Online solves for your screen's calibrated CSS-PPI using the following formula:
Calibrated PPI = (Guide Box CSS Pixels / Reference Dimension in mm) × 25.4
For example, if a 20.0 mm 1-Yen coin guide spans 120.5 CSS pixels, the calibrated PPI is calculated as: (120.5 / 20.0) × 25.4 = 153.035 PPI. This calibrated value is stored under jougi_calibrated_ppi in your browser storage.
Summary
With just a single coin or credit card, your phone or computer monitor transforms into a precision measuring tool comparable to physical rulers. Calibrate once and enjoy reliable measurements every time.