Word Spacing Tool

Overview

The Word Spacing tool adjusts the horizontal spacing between words to improve readability and reduce visual crowding. This tool is particularly helpful for users with dyslexia, visual processing difficulties, or those who benefit from enhanced word separation.

Features

• Progressive Spacing: Five incremental spacing levels for optimal readability
• Universal Application: Affects all text elements on the page using CSS word-spacing property
• Layout Preservation: Maintains page structure while enhancing word separation
• Consistent Enhancement: Uses precise pixel values for reliable spacing across all content

Settings

Level	Description
normal	Default website word spacing (disabled state)
1px	Slight word separation for improved readability
2px	Moderate spacing for enhanced clarity
3px	Increased spacing for reading difficulties
4px	Maximum spacing for severe visual processing needs

Usage

1. Click the Word Spacing button in the accessibility toolbar
2. Navigate through spacing levels using the stepper controls or repeated clicks
3. Word spacing adjusts immediately across all text content
4. Select the level that provides optimal reading comfort
5. Click when at maximum level to return to normal spacing

Accessibility Benefits

• Dyslexia Support: Reduces word crowding and improves reading flow
• Visual Processing: Helps distinguish between individual words
• Reading Accuracy: Reduces word skipping and reading errors
• Eye Strain Relief: Minimizes visual effort required for word recognition
• Focus Enhancement: Makes individual words more distinct and easier to process

Technical Implementation

Uses CSS word-spacing property with precise 2px increments applied to the document body. The tool maintains text readability and layout integrity while providing progressive spacing enhancement.

API Usage Example

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

// Basic activation (enables Level 1 - 2px spacing)
window.BrowseAidWidget.api.enableTool('word-spacing');

// Enable with specific spacing level
window.BrowseAidWidget.api.enableTool('word-spacing', {
  level: 3    // Level 3: 6px word spacing
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('word-spacing', {
  enabled: true,
  level: 2    // Level 2: 4px word spacing
});

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

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

// Disable the tool
window.BrowseAidWidget.api.disableTool('word-spacing');

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

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	1px, 2px, 3px, 4px	1	Word spacing level

Usage Patterns

// Reading difficulty-based spacing
const wordSpacingProfiles = {
  'mild-dyslexia': '1px',
  'moderate-dyslexia': '2px',
  'severe-dyslexia': '3px',
  'visual-processing': '4px'
};

function setWordSpacingForProfile(profile) {
  const level = wordSpacingProfiles[profile];
  if (level) {
    window.BrowseAidWidget.api.updateTool('word-spacing', {
      enabled: true,
      level: level
    });
  }
}

// Gradual spacing increase
function increaseWordSpacing() {
  const currentSettings = window.BrowseAidWidget.api.getToolState('word-spacing');
  const currentLevel = currentSettings?.level || 0;
  const nextLevel = Math.min(currentLevel + 1, 4);

  window.BrowseAidWidget.api.updateTool('word-spacing', {
    enabled: nextLevel > 0,
    level: nextLevel
  });
}