Letter Spacing Tool

Overview

The Letter Spacing tool adjusts the horizontal spacing between individual characters to improve letter recognition and reading clarity. This tool is essential for users with dyslexia, visual processing difficulties, or those who benefit from enhanced character separation.

Features

• Character Separation: Increases space between individual letters
• Reading Enhancement: Improves letter recognition and reduces visual crowding
• Progressive Spacing: Incremental adjustments for optimal readability
• Universal Coverage: Applies to all text elements on the page

Settings

Level	Description
normal	Default website letter spacing
0.5px	Slight character separation
1px	Moderate spacing for improved clarity
1.5px	Enhanced spacing for reading difficulties
2px	Maximum spacing for severe visual needs

Usage

1. Click the Letter Spacing button in the accessibility toolbar
2. Navigate through spacing levels using the stepper controls
3. Character spacing adjusts across all text content
4. Select the level that provides optimal reading comfort

Accessibility Benefits

• Dyslexia Support: Reduces letter crowding and improves character recognition
• Visual Processing: Helps distinguish between similar-looking characters
• Reading Accuracy: Reduces letter transposition and reading errors
• Eye Strain Relief: Minimizes visual effort required for character recognition
• Focus Enhancement: Makes individual letters more distinct and easier to process

Technical Implementation

Uses CSS letter-spacing property applied via CSS custom properties (--ada-letter-spacing) and HTML class toggles (ada-letter-spacing-active). The tool applies precise pixel values while maintaining text readability and layout integrity.

API Usage Example

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

// Basic activation
window.BrowseAidWidget.api.enableTool('letter-spacing');

// Enable with specific spacing level
window.BrowseAidWidget.api.enableTool('letter-spacing', {
  level: '1px'    // Medium letter spacing
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('letter-spacing', {
  enabled: true,
  level: '1.5px'    // Large letter spacing
});

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

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

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

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

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	'normal', '0.5px', '1px', '1.5px', '2px'	'normal'	Letter spacing in pixels

Level Examples

• 'normal' - Default character spacing (CSS: normal)
• '0.5px' - Subtle spacing for minor assistance
• '1px' - Standard spacing for improved readability
• '1.5px' - Enhanced spacing for dyslexia support
• '2px' - Maximum spacing for severe visual processing needs

Usage Patterns

// Reading difficulty-based spacing
const letterSpacingProfiles = {
  'normal': 'normal',
  'mild-dyslexia': '0.5px',
  'moderate-dyslexia': '1px',
  'severe-dyslexia': '1.5px',
  'visual-impairment': '2px'
};

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

// Cycle through letter spacing options (matches button behavior)
function cycleLetterSpacing() {
  const options = ['normal', '0.5px', '1px', '1.5px', '2px'];
  const currentSettings = window.BrowseAidWidget.api.getToolState('letter-spacing');
  const currentLevel = currentSettings?.level || 'normal';
  const currentIndex = options.indexOf(currentLevel);
  const nextIndex = (currentIndex + 1) % options.length;
  const nextLevel = options[nextIndex];

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

Tool Behavior Notes

• Active State: The tool is considered active when enabled: true AND level is not 'normal'
• CSS Implementation: Uses CSS custom property --ada-letter-spacing with HTML class ada-letter-spacing-active
• Cycling Behavior: Button cycles through all options, disabling the tool when returning to 'normal'
• Step System: Each option has an associated step number (0-4) for UI stepper controls