Text Alignment Tool

Overview

The Text Alignment tool adjusts the horizontal alignment of text content to improve readability and accommodate different reading preferences. This tool is particularly helpful for users with dyslexia, visual processing difficulties, or those who prefer specific text alignments for better comprehension.

Features

• Five Alignment Options: Default, left, center, right, and justified text alignment
• Universal Application: Affects all text elements on the page using CSS !important rules
• Layout Preservation: Maintains page structure while adjusting text flow
• Reading Enhancement: Improves text readability based on user preferences
• Cycling Navigation: Easy cycling through alignment options

Settings

Level	Alignment	Description
default	Original	Website's default text alignment (tool disabled)
left	Left-aligned	All text aligned to the left margin
center	Centered	All text centered horizontally
right	Right-aligned	All text aligned to the right margin
justify	Justified	Text stretched to fill line width evenly

Usage

1. Click the Text Alignment button in the accessibility toolbar
2. Navigate through alignment options by clicking repeatedly
3. Text alignment adjusts across all content with each click
4. Return to default to disable the tool
5. Select the alignment that provides optimal reading comfort

Accessibility Benefits

• Dyslexia Support: Left alignment can reduce reading difficulties
• Visual Processing: Consistent alignment aids text tracking
• Cultural Preferences: Right alignment for right-to-left languages
• Reading Flow: Improved text scanning and comprehension
• Focus Enhancement: Predictable text positioning reduces cognitive load

Technical Implementation

Uses CSS text-align property with !important declaration to override existing styles. The tool applies a CSS variable --ada-text-align and toggles the ada-text-align class on the HTML element when active (level !== 'default').

API Usage Example

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

// Basic activation with left alignment
window.BrowseAidWidget.api.enableTool('text-align');

// Enable with specific alignment level
window.BrowseAidWidget.api.enableTool('text-align', {
  level: 'left'    // Options: 'default', 'left', 'center', 'right', 'justify'
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('text-align', {
  level: 'center'    // Center-align all text
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('text-align');
console.log('Text Alignment is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('text-align');
console.log('Current Text Alignment settings:', settings);
// Returns: { enabled: boolean, level: 'default'|'left'|'center'|'right'|'justify' }

// Disable the tool (sets level to 'default')
window.BrowseAidWidget.api.disableTool('text-align');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'text-align') {
    console.log('Text Alignment settings changed:', settings);
    console.log('Tool is active:', settings.enabled && settings.level !== 'default');
  }
});

Configuration Options

Option	Type	Values	Default	Description
level	string	'default', 'left', 'center', 'right', 'justify'	'default'	Text alignment option

Note: The enabled property is automatically managed based on the level value. The tool is considered active when level !== 'default'.

Level Details

• 'default' - Original website alignment, tool disabled
• 'left' - Left-aligned text for optimal readability
• 'center' - Centered text for emphasis
• 'right' - Right-aligned text for RTL languages
• 'justify' - Justified text for formal appearance

Usage Patterns

// Reading preference-based alignment
const readingProfiles = {
  'dyslexia-friendly': 'left',
  'formal-document': 'justify',
  'presentation': 'center',
  'rtl-language': 'right',
  'default': 'default'
};

function setAlignmentForProfile(profile) {
  const level = readingProfiles[profile] || 'default';
  window.BrowseAidWidget.api.updateTool('text-align', {
    level: level
  });
}

// Language-based alignment
function setAlignmentForLanguage(language) {
  const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
  const isRTL = rtlLanguages.includes(language);

  window.BrowseAidWidget.api.updateTool('text-align', {
    level: isRTL ? 'right' : 'left'
  });
}

// Content-type based alignment
function setAlignmentForContent(contentType) {
  const alignmentMap = {
    'article': 'left',      // Left for reading
    'poetry': 'center',     // Center for artistic text
    'legal': 'justify',     // Justify for formal documents
    'announcement': 'center', // Center for notices
    'default': 'default'    // Website default
  };

  const level = alignmentMap[contentType] || 'default';
  window.BrowseAidWidget.api.updateTool('text-align', {
    level: level
  });
}

// Cycling through options programmatically
function cycleTextAlignment() {
  const currentSettings = window.BrowseAidWidget.api.getToolState('text-align');
  const options = ['default', 'left', 'center', 'right', 'justify'];
  const currentIndex = options.indexOf(currentSettings.level);
  const nextIndex = (currentIndex + 1) % options.length;

  window.BrowseAidWidget.api.updateTool('text-align', {
    level: options[nextIndex]
  });
}