Reading Mask Tool

Overview

The Reading Mask tool creates a horizontal reading window that follows your mouse cursor, highlighting the current reading area while dimming the surrounding content. This tool helps users with attention difficulties, dyslexia, or visual processing challenges by reducing visual distractions and maintaining reading focus.

Desktop Only

This tool requires mouse cursor control and is not available on mobile or touch devices. It relies on precise mouse movement tracking for optimal functionality.

Keyboard Shortcuts

• ESC (hold 0.5s): Quick tool dismissal
• The tool shows visual feedback when ESC is held, fading the mask before deactivation

Features

• Mouse-Following Window: Horizontal reading window that tracks cursor movement
• Viewport Constraints: Automatically constrains to screen boundaries
• Customizable Dimensions: Adjustable window height and mask opacity
• Quick Exit: Hold ESC key for 0.5 seconds to disable
• Smooth Transitions: Gentle fade animations when closing
• Full-Width Coverage: Reading window spans entire screen width
• Blue Border Indicators: Clear visual borders to define the reading area

Settings

The Reading Mask tool provides simple toggle functionality in the widget interface:

Level	Description
Disabled	Reading mask is hidden
Enabled	Shows mouse-following reading window with dimmed surroundings

Advanced Customization

While the widget interface provides a simple on/off toggle, window height and mask opacity can be customized via the API for tailored reading experiences.

Usage

1. Activation: Click the Reading Mask button in the accessibility toolbar
2. Positioning: Move your mouse over text content - the reading window follows automatically
3. Reading: The horizontal window highlights your current reading area
4. Quick Exit: Hold the ESC key for 0.5 seconds to quickly disable the tool
5. Deactivation: Click the tool button again to disable normally

Accessibility Benefits

• Focus Enhancement: Eliminates visual clutter and surrounding distractions
• Dyslexia Support: Maintains reading flow and prevents line skipping
• ADHD Assistance: Creates a focused reading zone free from environmental distractions
• Visual Processing Aid: Simplifies complex layouts for easier text comprehension
• Reading Fatigue Reduction: Minimizes eye strain by limiting peripheral visual information
• Concentration Improvement: Provides a dedicated, distraction-free reading area

Technical Implementation

The tool uses CSS overlay techniques with full-screen masking and z-index layering. JavaScript handles real-time cursor tracking, viewport boundary detection, and dynamic positioning of the reading window. The implementation includes keyboard event handling for quick tool dismissal.

API Usage Example

The Reading Mask tool can be programmatically controlled using the widget API. Here's how to enable and customize the tool:

// Basic activation
window.BrowseAidWidget.api.enableTool('reading-mask');

// Enable with custom settings
window.BrowseAidWidget.api.enableTool('reading-mask', {
  enabled: true,
  windowHeight: 200,    // Height of reading window in pixels (default: 160)
  maskOpacity: 0.8      // Opacity of dimmed areas: 0 to 1 (default: 0.6)
});

// Update tool settings while active
window.BrowseAidWidget.api.updateTool('reading-mask', {
  enabled: true,
  windowHeight: 250,    // Larger reading window
  maskOpacity: 0.4      // Lighter dimming for subtle effect
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('reading-mask');
console.log('Reading Mask is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('reading-mask');
console.log('Current Reading Mask settings:', settings);

// Disable the tool
window.BrowseAidWidget.api.disableTool('reading-mask');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'reading-mask') {
    console.log('Reading Mask settings changed:', settings);
    if (settings.enabled) {
      console.log(`Window height: ${settings.windowHeight}px, Mask opacity: ${settings.maskOpacity}`);
    }
  }
});

// Clean up listener when done
unsubscribe();

Configuration Options

Option	Type	Range	Default	Description
enabled	boolean	true/false	false	Enables or disables the reading mask tool
windowHeight	number	50 - 500	160	Height of the reading window in pixels
maskOpacity	number	0 - 1	0.6	Opacity of the dimmed surrounding areas

Window Height Guidelines

• 100 - Compact window for focused single-line reading
• 160 - Standard window for comfortable paragraph reading (default)
• 200 - Larger window for multiple lines or larger text
• 300 - Extra large window for extensive text blocks

Mask Opacity Guidelines

• 0.3 - Light dimming for subtle focus enhancement
• 0.6 - Standard dimming for balanced focus (default)
• 0.8 - Heavy dimming for maximum concentration
• 0.9 - Very heavy dimming for severe attention difficulties