Page Ruler

About

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