Transform text for easier reading with our free dyslexia-friendly formatter. Use bionic reading techniques, adjust line height, and customize fonts for improved accessibility and focus.
AI Generation Prompt
Technical Specification: Dyslexia-Friendly Text Formatter & Bionic Reader
1. Executive Summary
A single-file, browser-based utility that acts as a reading aid. It formats plain text using the 'Bionic Reading' method (bolding the start of words) and provides accessibility-focused style controls for reading, such as font choice (including dyslexia-specific fonts), letter spacing, and line height adjustments.
2. Technical Constraints (Strict Compliance)
- Architecture: Single HTML file containing CSS and Vanilla JavaScript. No external build steps.
- Storage: NO
localStorage,sessionStorage, or cookies. State must be handled in-memory. If the user refreshes, content will reset. - Compatibility: Must operate within a sandboxed
iframe. Avoidalert(),prompt(), andconfirm(). - Design: Strictly light-mode (professional, clean, vibrant). NO dark mode toggle.
- Dependencies: Tailwind CSS via CDN for rapid UI layout. Google Fonts (OpenDyslexic, Atkinson Hyperlegible, Arial) via CDN.
3. User Interface (UI) Layout
- Header: Clean, minimal title bar with a brief 'How to use' tooltip icon.
- Main Tool Area:
- Sidebar (Control Panel): Fixed or collapsible panel containing formatting sliders and toggles.
- Input/Output Split: A two-pane view or a single toggleable view.
- Input: Plain text textarea.
- Output: The formatted, styled text result.
- Footer: None.
4. Feature List
- Live Bionic Transformation: Real-time parser that adds
<strong>tags to the first half of words as the user types. - Font Customizer: Dropdown to switch between readable fonts (OpenDyslexic, Atkinson Hyperlegible, Verdana).
- Spacing Sliders:
- Letter Spacing (0px to 10px)
- Line Height (1.2 to 3.0)
- Paragraph Spacing (10px to 50px)
- Focus Mode: A highlight effect for the active paragraph currently under the mouse cursor.
- Browser-Native Text-to-Speech: A 'Read Aloud' button utilizing the Web Speech API (
window.speechSynthesis). - Export: A simple 'Print' button or 'Copy to Clipboard' function.
5. Design & Aesthetics
- Color Palette:
- Background:
#F9F7F2(Cream/Off-white for reduced glare). - Primary Text:
#2D3436(Soft Black/Charcoal). - Accent:
#0984E3(Bright, professional blue for buttons). - Highlights:
#FFEAA7(Soft yellow for active text).
- Background:
- Animations:
- Smooth CSS transitions (
transition: all 0.3s ease-in-out) on all font-size and spacing changes to prevent jarring jumps. - Fade-in animation for text content appearing in the output window.
- Smooth CSS transitions (
6. Implementation Notes for Developer
- Parser Logic: The Bionic Reading parser should be regex-based. Target words longer than 3 characters. Apply bolding to the first
Math.ceil(word.length / 2)characters. - No-Storage Safety: Since
localStorageis blocked, ensure that any user-inputted text is handled strictly in the DOM and cleaned up manually if needed. Do not attempt to save sessions. - Accessibility: All buttons must have
aria-labelattributes. The tool must be keyboard-navigable.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is the Bionic Reading technique used in this tool?
Bionic Reading is a reading accessibility method that highlights the initial part of words—typically the first few characters—in bold. By fixing the eye on these highlighted segments, the brain is often able to complete words more quickly, which can significantly reduce the cognitive load associated with decoding text. This technique is designed to guide the eyes through text more fluidly. By providing visual anchors within words, many users report improved reading speed and comprehension, particularly those with dyslexia or attention-related processing challenges.
How does this tool help users with dyslexia?
This tool focuses on visual customizability, which is crucial for dyslexic readers. By offering specific fonts like OpenDyslexic that are weighted at the bottom to prevent letter flipping, and controls for character spacing, line height, and word spacing, users can tailor the interface to their specific visual needs. In addition to custom formatting, the tool removes visual clutter. By isolating text in a clean, high-contrast, yet eye-strain-reducing light environment, the user can focus entirely on the content, minimizing distractions that often interfere with reading fluidity.
Is my text data stored or saved by this application?
No, your text data is never saved, transmitted to a server, or stored in any persistent manner. This application is designed as a client-side utility, meaning all processing happens locally within your web browser. Because this tool is built without database connectivity or server-side storage, once you refresh the page or close your browser, your text will be cleared. This ensures a private and secure experience for all your formatting tasks, allowing you to use the tool with sensitive documents without privacy concerns.
Are there specific settings to improve reading speed and focus?
Yes, the application provides granular controls for line-height and character spacing. Increasing these values is a proven strategy for reducing 'crowding' effects, where letters appear to blend together. Adjusting these settings can make it significantly easier to maintain your place while reading long blocks of text. Furthermore, the tool includes a focus-assist feature that highlights the paragraph currently being processed. By narrowing the field of vision to the immediate area being read, users can minimize external distractions and stay engaged with the text for longer periods without feeling overwhelmed.
