Measuring Ruler is a lightweight, browser-based tool that lets you measure anything on your screen with real-world units. It includes a high-contrast ruler canvas, draggable A/B cursors to mark distances, optional guide lines, and a fast calibration workflow so you can trust the numbers. Everything runs locally in your browser—no sign-in, no server calls, and no external dependencies.

Who it’s for

• Construction & site teams: quick checks of drawings, details, and site photos.
• Interior designers & architects: measuring furniture footprints, joinery details, and plan annotations.
• Engineers & technicians: verifying tolerances against digital drawings.
• Product teams & QA: consistent measurement of UI mockups or screenshots.

Key capabilities

• Units: switch between millimeters (mm), centimeters (cm), and inches (in) instantly.
• Orientation: flip the ruler Horizontal or Vertical to match your subject.
• Zoom & Pan: zoom with the mouse wheel (or dropdown) and pan the canvas, so you can work precisely at any scale.
• Two cursors (A & B): drag the green and amber lines to mark start and end points; the tool shows the exact distance between them.
• Guides: add one-click guide lines for repeated references and alignment.
• Calibration: match the on-screen scale to a real 100 mm using the draggable calibration bar, or enter pixels-per-millimeter (PPM) directly.
• Clear & Reset: reset cursors, guides, and view with a single action.
• Keyboard shortcuts:
  • N = new guide, Delete = clear guides, S = swap A/B
  • Shift + drag = snap to tick marks for clean increments

Quick start (2 minutes)

1. Open the tool. You’ll see the ruler canvas on the right and controls on the left.
2. Pick your units. Choose mm, cm, or in.
3. Calibrate (recommended):
   • If you have a physical ruler, drag the blue calibration bar until it matches exactly 100 mm on your desk ruler.
   • Click Set 100mm. This sets your screen’s pixels per millimeter (PPM) so readouts are accurate.
   • Alternatively, type your known PPM and click Apply.
4. Place cursors: Click or drag on the canvas to position Cursor A and Cursor B over the start and end of what you want to measure.
5. Read the value: The Distance panel and on-canvas label show the precise measurement in your selected units.

Calibration guide

Accurate calibration is the heart of this tool. Follow these tips for best results:

• Use full brightness and 100% page zoom in your browser (no page scaling).
• Don’t scale the browser window while calibrating; set the bar first, then measure.
• Align the calibration bar with a good physical ruler placed right against the screen—avoid parallax by viewing straight on.
• If you switch devices or displays, repeat the calibration—PPM changes with pixel density (DPI).
• Typical defaults: many displays are close to 3.78 px/mm (~96 DPI), but don’t rely on defaults if accuracy matters—calibrate.

Measuring accurately

• Snap to ticks: Hold Shift while dragging a cursor to snap to the nearest tick. This is great for consistent increments.
• Zoom in for precision: Use the mouse wheel to zoom near the feature you’re measuring, then pan to center it.
• Swap A/B: Use the Swap button (or press S) to flip start/end without moving both lines manually.
• Vertical vs Horizontal: If you’re measuring height or vertical spacing, switch orientation to Vertical for more comfortable dragging.
• Use guides: Add guides for repeated measurements from the same reference—especially helpful in grid layouts or section details.

Interface elements (left panel)

• Units: Choose mm, cm, or inches—distance readouts update immediately.
• Orientation: Horizontal for widths/lengths; Vertical for heights/levels.
• Zoom: 50% to 300% via dropdown; the wheel lets you fine-tune on the canvas.
• Calibration (PPM): Enter a number (e.g., 3.779) and press Apply, or use Quick Calibrate.
• Quick Calibrate:
  • Drag the handle on the blue bar to match exactly 100 mm on your physical ruler.
  • Check the Width and Computed PPM indicators as you adjust.
  • Click Set 100mm to apply automatically.
• Cursors & Guides:
  • Swap A/B swaps the cursor labels.
  • Add Guide creates a centered reference line (between A and B).
  • Clear Guides removes all guide lines.
• Clear All: Resets cursors, guides, pan, and zoom to defaults.

Canvas interactions (right panel)

• Click near a feature to place the nearest cursor (A or B).
• Drag a cursor line to fine-tune its position; hold Shift to snap.
• Middle-mouse or Ctrl+Drag to pan the canvas when zoomed.
• Mouse wheel to zoom in/out around the cursor location.
• The on-canvas dimension bracket and the Distance panel always show the current measurement.

Practical examples

• Plan view dimension: Calibrate once. Place A on the left edge of a wall and B on the right edge; read the wall thickness in mm or in.
• Elevation spacing: Switch to Vertical orientation. Place A at the base line and B at the cornice; read overall height.
• Furniture clearance: Add guides for a cabinet’s outer edges, then drop cursors to insert clearances and check minimum spacing.
• UI spacing checks: Switch to mm or in as needed; zoom in on a screenshot to check padding between components.

Accuracy notes and best practices

• Calibrate for each screen you use (laptop, external monitor, projector).
• Disable browser zoom at the page level (keep it at 100%)—use the tool’s own zoom.
• For critical measurements, take two passes: measure once, zoom, re-measure, and ensure both numbers match.
• If measurements seem off after resizing your window or changing OS display scaling, re-calibrate.

Common questions (FAQ)

Q: Do I have to calibrate every time?
A: No. If you keep the same device, OS scaling, and browser zoom, your PPM will stay valid. Calibrate again if anything changes.

Q: Why are my values slightly off?
A: The most common causes are (1) browser zoom not at 100%, (2) OS display scaling changed, (3) physical ruler misalignment, or (4) not viewing the screen straight on. Re-check these and recalibrate.

Q: Can I measure diagonal distances or angles?
A: This tool is optimized for linear measurements along one axis. For diagonal/angle work, place incremental guides or export a snapshot to a CAD tool. If you need a protractor mode, we can add that as an enhancement.

Q: Will it work offline?
A: Yes. It’s pure client-side JavaScript and runs entirely in your browser.

Q: Does it store my data?
A: The “Lite” version doesn’t save to localStorage. If you need persistent settings or CSV export/import, we can enable those options in the full variant.