Line Spacing Tool

Overview

The Line Spacing tool adjusts the vertical space between lines of text to improve readability and comprehension. This tool is particularly beneficial for users with dyslexia, visual processing difficulties, or those who need enhanced text clarity.

Features

• Progressive Spacing: Incremental line height adjustments with 5 preset levels
• Universal Application: Affects all text elements on the page using CSS custom properties
• Layout Preservation: Maintains page structure while enhancing readability
• Consistent Ratios: Uses standard line-height multipliers for optimal readability

Settings

Level	Description
normal	Default website line spacing (disabled state)
1.5	Moderate spacing increase for better readability
1.8	Enhanced spacing for improved visual separation
2	High spacing for users with reading difficulties
2.5	Maximum spacing for severe visual processing needs

Usage

1. Click the Line Spacing button in the accessibility toolbar
2. The tool cycles through spacing levels with each click
3. Line spacing adjusts across all text elements (body, p, div, li, td, span, a)
4. Setting returns to 'normal' after the maximum level, disabling the tool

Accessibility Benefits

• Dyslexia Support: Reduces line confusion and improves reading flow
• Visual Processing: Helps users distinguish between text lines
• Reading Comprehension: Enhances text clarity and reduces cognitive load
• Eye Strain Relief: Minimizes visual fatigue during extended reading
• Attention Focus: Helps maintain reading position and flow

Technical Implementation

The tool applies CSS custom properties (--ada-line-spacing) and adds the ada-line-spacing class to the HTML element. It uses CSS line-height properties with !important declarations to override existing styles on text elements.

API Usage Example

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

// Basic activation (enables with level '1.5')
window.BrowseAidWidget.api.enableTool('line-spacing');

// Enable with specific spacing level
window.BrowseAidWidget.api.enableTool('line-spacing', {
  level: '1.8'    // Set to 1.8x line height
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('line-spacing', {
  enabled: true,
  level: '2'      // Increase to 2x spacing
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('line-spacing');
console.log('Line Spacing is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('line-spacing');
console.log('Current Line Spacing settings:', settings);

// Disable the tool (sets level back to 'normal')
window.BrowseAidWidget.api.disableTool('line-spacing');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'line-spacing') {
    console.log('Line Spacing settings changed:', settings);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	'normal', '1.5', '1.8', '2', '2.5'	'normal'	Line spacing multiplier

Level Examples

• 'normal' - Default line spacing (tool disabled)
• '1.5' - Moderate increase for basic readability
• '1.8' - Enhanced spacing for dyslexia support
• '2' - High spacing for visual processing difficulties
• '2.5' - Maximum spacing for severe reading challenges

Usage Patterns

// Reading difficulty adaptation
const readingProfiles = {
  'normal': 'normal',
  'mild-difficulty': '1.5',
  'dyslexia': '1.8',
  'visual-processing': '2',
  'severe-difficulty': '2.5'
};

function setLineSpacingForProfile(profile) {
  const level = readingProfiles[profile] || 'normal';
  window.BrowseAidWidget.api.updateTool('line-spacing', {
    enabled: level !== 'normal',
    level: level
  });
}

// Progressive enhancement (cycling through levels)
function increaseLineSpacing() {
  const currentSettings = window.BrowseAidWidget.api.getToolState('line-spacing');
  const levels = ['normal', '1.5', '1.8', '2', '2.5'];
  const currentIndex = levels.indexOf(currentSettings?.level || 'normal');
  const nextIndex = (currentIndex + 1) % levels.length;
  const nextLevel = levels[nextIndex];

  window.BrowseAidWidget.api.updateTool('line-spacing', {
    enabled: nextLevel !== 'normal',
    level: nextLevel
  });
}

// Check if tool is currently active (not at 'normal' level)
function isLineSpacingActive() {
  const settings = window.BrowseAidWidget.api.getToolState('line-spacing');
  return settings?.enabled && settings?.level !== 'normal';
}