Ruler

Add precision design-tool rulers and draggable alignment guides to any webpage.

Ruler adds precision design-tool rulers and draggable alignment guides directly to the webpage you are viewing. Features: • Fixed translucent horizontal and vertical rulers with sharp HiDPI tick marks and labels • Drag from either ruler to create alignment guides • Live coordinate badge while placing or moving guides • Whole-pixel snapping by default • Hold Shift while dragging for 10px snapping • Drag a guide back into its ruler or double-click it to remove it • Clear all guides or hide Ruler from the intersection menu • Press Escape to cancel an active drag • Guides remain anchored to document coordinates while scrolling • Shadow DOM isolation prevents styles from leaking into or out of the webpage How to use: 1. Click the Ruler toolbar icon to activate it on the current webpage. 2. Drag downward from the top ruler for a horizontal guide. 3. Drag rightward from the left ruler for a vertical guide. 4. Drag existing guides to reposition them. 5. Click the toolbar icon again to remove Ruler and its guides. Privacy: Ruler works entirely on your device. It does not collect, store, track, or transmit personal data, browsing history, or webpage content. It contains no analytics, telemetry, advertising, remote code, or external network services.