Reading Ruler Overlay

WHAT IT DOES

This script adds a semi-transparent horizontal overlay bar—a reading ruler—to any webpage, helping you focus on one line of text at a time. The ruler follows your mouse cursor by default, highlighting the line directly beneath it. As you scroll, the ruler moves with the page, or you can lock it in place. The ruler height, opacity, and color are fully customizable, allowing you to choose settings that work best for your reading comfort. Keyboard shortcuts let you move the ruler up and down, toggle visibility, and lock/unlock the position. This is especially useful for people with dyslexia, visual tracking difficulties, or anyone who wants to reduce visual distraction while reading.

WHERE IT RUNS

The script runs on all websites (*://*/*), making it truly universal. It works on any page with text content—articles, documents, emails, forums, and more. It supports both desktop and mobile views.

HOW TO USE

After installation, the settings panel appears on the left side of the screen with the gear emoji (⚙️). Open the panel to configure the script:

- The "Enable reading ruler" toggle enables or disables the ruler.

- Adjust the "Ruler height" slider to control how many lines of text are highlighted.

- Adjust the "Opacity" slider to control the transparency of the ruler.

- Use the color picker to choose the ruler's highlight color.

- Toggle "Follow mouse cursor" to enable or disable mouse tracking.

- Use the "Lock/Unlock position" button to fix the ruler in place.

- Use "Toggle ruler visibility" to show or hide the ruler.

- Click "Move up" or "Move down" to adjust the ruler position.

The ruler appears automatically when enabled. Use the keyboard shortcuts: ↑/↓ to move the ruler, L to lock/unlock, and R to toggle visibility.

TECHNICAL SECTION — REAL MECHANISM

The ruler is created as a fixed-position div element with a semi-transparent background color and a subtle glow effect. It is positioned absolutely in the viewport using position:fixed and follows the mouse cursor by listening to the mousemove event, calculating the vertical position as clientY - height/2. The ruler's height, opacity, and color are applied via CSS style properties. The scroll position is tracked with the scroll event, and the ruler moves with the page when not following the mouse. Keyboard shortcuts are implemented using document.addEventListener for keydown events, with arrow keys adjusting the top position by 5 pixels per press. The ruler can be locked by toggling a boolean flag that prevents position updates from mouse or scroll events. All settings are persisted via GM_setValue and loaded on page load.

THE PANEL

The settings panel is built with BotGentz's BGPanel component. It is draggable via its header, allowing you to reposition it anywhere on the screen. The panel snaps to the left edge by default but can be moved freely. Click the gear emoji to collapse the panel into a small bubble, and click the bubble to expand it again. The panel remembers its position per page session. Press the Escape key to quickly close or minimize the panel. The panel includes a status flash bar that provides visual feedback when settings are changed or actions are performed. All settings save automatically via GM_setValue.

PLEASE NOTE

This script requires the free BotGentz browser extension to run. It does not function as a standalone Chrome extension and does not use chrome.* APIs. The ruler is designed to aid reading focus—it does not modify the page content or interfere with interactions. The ruler may overlap with interactive elements; if you need to click something behind the ruler, you can toggle it off temporarily with the R key or disable it in the panel. The script stores only your preferences via GM_setValue. No data is sent externally—all data is stored locally in your browser. The script never reads or writes password fields, hidden inputs, or file inputs. All DOM operations use safe methods (style properties, textContent, appendChild) and never use innerHTML.