Page Ruler

Measure elements and distances with box mode or draggable ruler. Supports px, cm, inch. Rotate, resize, and customize colors.

Page Ruler is a versatile and powerful tool designed for web developers, designers, and anyone needing precise measurements on webpages. Quickly measure the width, height, and position of any element—buttons, images, text areas, containers—and check spacing and alignments with pixel-perfect accuracy. Box Measure Mode: Activate the tool by clicking the toolbar icon, then drag your mouse to select the area to measure. Instantly see dimensions in pixels displayed in real-time. Create multiple measurement boxes (up to 10) by holding Ctrl/Cmd while clicking, allowing you to compare dimensions across different page elements simultaneously. Resize boxes using corner and edge handles, or enable fixed dimensions mode to create boxes with predefined sizes (adjustable via keyboard arrows or direct input) that can be moved around the page. Display optional alignment guide lines—vertical lines at left/right edges, horizontal lines at top/bottom edges, and center lines—to help align measurements across the page. Customize guide line colors to match your workflow. Visual Ruler Mode: Switch to ruler mode for a draggable, rotatable ruler that supports multiple units: pixels (px), centimeters (cm), and inches (inch). The ruler features precise measurement markings based on the selected unit—major, medium, and minor tick marks for easy reading. Rotate the ruler freely with the rotation handle (double-click to reset, or Ctrl+drag to snap to 45° increments), with the current rotation angle displayed for precision. Resize from either end, position the rotation handle on left or right, and customize the ruler color to fit your design workflow. Enable optional horizontal guide lines at the ruler's top edge, center (rotation point), and bottom edge—all rotating with the ruler to help align measurements. Customize guide line colors independently. Customization & Settings: Fine-tune your measurement experience with comprehensive settings: adjust outline and background colors, control opacity, choose and customize fixed dimensions for box mode (with arrow key support for precise adjustments), select ruler colors, position the rotation handle on the left or right, toggle rotation angle display visibility, and enable/customize guide lines for both measurement modes with individual color controls. All settings are saved automatically for a seamless experience across sessions. Whether refining responsive layouts, verifying exact sizes, or measuring angles and distances, Page Ruler offers flexible measurement modes, precision alignment tools, and an intuitive interface to simplify your web design and development process. --- Complete Feature Set: - Multiple box support (up to 10 boxes) - Fixed dimensions feature with adjustable width/height (arrow key and direct input support) - Complete visual ruler mode with rotation, resizing, and multi-unit support - Rotation angle display (toggleable) - Box measure guide lines (6 lines: left, right, top, bottom, center-horizontal, center-vertical) - Visual ruler guide lines (3 lines: top, middle/center, bottom - all rotating with ruler) - Customizable guide line colors for both modes - Enhanced customization options - Mode switching capability - All settings persist across sessions --- New Additions - 3 rotating vertical guide lines for Visual Ruler (Left, Right, Center V) - Comprehensive Help & Information panel with keyboard shortcuts and usage tips - Help button (i) in top menu for quick access to documentation - Enhanced mode toggle button with visual letter indicators (B for Box, V for Ruler) - Fixed vertical guide line rotation to properly align with ruler at any angle - Improved guide line visibility management when switching modes - Enhanced settings panel z-index for better UI hierarchy - Added G button for quick toggle of all guide lines (Purple=ON, Gray=OFF)