1px: Simple ruler

A simple ruler for measuring the size of blocks on a page

1px: Simple Ruler is a fast, modern, and lightweight screen measurement tool crafted for web developers, UI/UX designers, QA testers, and digital creators. Inspect paddings, measure element dimensions, and verify your layouts with pixel-perfect accuracy directly in your browser. No need to open heavy DevTools panels just to check a button size, image proportions, or card margins. Activate the ruler, drag over the element, and instantly read width, height, diagonal, and coordinate metrics! 🌟 KEY FEATURES: 1. Fast Drag-to-Measure Click and drag across any element or section to measure its exact boundaries. Supports both drag gestures and two-click measurement modes. 2. Comprehensive HUD Tooltip Follows your cursor with live metrics: • Width (W) and Height (H) in pixels; • Diagonal length (D); • Document coordinates for origin and cursor (X / Y); • Contextual keyboard hints. 3. Boundary Edge Badges Clean, high-contrast dimension badges are rendered directly on the top and right edges of the selection box for fast visual reading. 4. Full-Viewport Alignment Guides (Crosshair) Subtle dashed horizontal and vertical guide lines extend across the entire viewport to help align components with grid lines and neighboring elements. 5. 1:1 Square Constraint Hold Shift while dragging to lock the selection into an exact 1:1 aspect ratio. 6. Pixel-Nudge Precision via Arrow Keys Fine-tune your selection with keyboard precision: • Arrow keys (↑ ↓ ← →) — Nudge the entire box by 1px (or 10px with Shift); • Alt / Ctrl + Arrow keys — Resize width and height by 1px increments. 7. Seamless Page Scrolling Scroll freely with your mouse wheel while measuring long landing pages without resetting your active selection. 8. Shadow DOM Encapsulation The ruler overlay and controls live inside an isolated Shadow DOM container. It will never break host page stylesheets, reset layouts, or leave lingering elements behind. ⌨️ SHORTCUTS & CONTROLS: • Alt + R — Toggle ruler on/off (configurable in chrome://extensions/shortcuts) • Left Click + Drag — Measure rectangular area • Shift + Drag — Constrain to 1:1 square • Arrow keys (↑ ↓ ← →) — Move selection by 1px (10px with Shift) • Alt / Ctrl + Arrow keys — Resize selection by 1px • Delete / Backspace — Clear current selection • Esc — Clear selection (if drawn) / Close ruler 🔒 PRIVACY & SECURITY: 1px: Simple Ruler operates strictly client-side. No analytics, no tracking scripts, no telemetry, and zero network requests. Your browsing stays completely private.