📏Reading Ruler

Core Features

• Mouse-following horizontal reading ruler
• Dimming outside the focus band for better concentration
• Adjustable ruler height and dim strength
• Live popup controls with immediate page updates
• Keyboard shortcuts for fast in-page adjustments

How to Use

1. Click the Reading Ruler extension icon
2. Enable the ruler toggle in the popup
3. Move your pointer to position the focus band
4. Adjust ruler height and dim strength with sliders
5. Use Reset to return to default settings

Settings and Ranges

• Enabled default: Off
• Ruler height default: 32px (range 8 to 240px)
• Dim strength default: 0.4 (range 0.05 to 0.95)
• Settings key: readingRulerSettings
• Saved with chrome.storage.sync for profile sync support

Keyboard Shortcuts

All shortcuts require Ctrl+Shift in page context.

• R: Toggle ruler on or off
• ArrowUp: Increase ruler height by 4px
• ArrowDown: Decrease ruler height by 4px
• ArrowLeft: Increase dim strength by 0.05
• ArrowRight: Decrease dim strength by 0.05

Overlay Rendering

• Injects dim overlay, ruler band, and hint popup layers
• Uses pointer-events: none to avoid blocking page interaction
• Uses requestAnimationFrame for smooth mouse-follow updates
• Uses brightening in-band effect with backdrop-filter when supported
• Falls back to translucent white highlight where needed

Compatibility and Permissions

Built as a Manifest V3 Chrome extension with popup and content script.

Uses only the storage permission and runs on all URLs for page overlay behavior.

Privacy

Preferences are stored in chrome.storage.sync for your browser profile.

The extension focuses on visual guidance and does not require data collection for core use.

Changelog / Updates

v1.1 - Pointer-follow ruler overlay with synced settings, live updates, and keyboard shortcut controls.

Many more improvements and quality-of-life updates are coming.

Install

Support the Project

If you want to help support my work, you can leave a donation on Ko-fi.

Support / Contact

Report bugs or request features on GitHub:

FAQ

Why is the ruler not visible?
Make sure the ruler is enabled in the popup and the page allows content script injection.

Will this block clicking on websites?
No. Overlay layers use pointer-events: none so normal interaction still works.

Do my settings sync between browsers?
Settings sync across contexts tied to the same browser profile that supports sync.