Page Ruler

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)
- Fixed visual ruler cannot change length when rotated 90 degrees (vertical position)
- Added Horizontal & Vertical quick selection buttons for Visual Ruler