The problem: Many people give up on long articles, dense documents and tiny print — not because the words are hard, but because the page is. Small fonts, cramped lines and low contrast quietly lock out readers with low vision, dyslexia, eye strain, or simply tired eyes. The content is fine; the presentation is the barrier.
The solution: ClearRead takes any text you paste or drop in and re-renders it the way your eyes need. Add text three ways — paste it, drag and drop a .txt or .md file, or pick a file. Large-print reader with four themes (Light, Dark, High contrast black/yellow, Cream low-glare), four fonts including a dyslexia-friendly option, and sliders for text size (18–64px), line spacing and letter spacing. Read aloud: text-to-speech with live word highlighting that follows the narration, plus pause/resume/stop and speed control (0.5x–2x). Private by design: everything runs locally in the browser; your text never leaves your device. Accessible itself: full keyboard navigation, visible focus rings, ARIA labels and a live status region.
How I built it: A single self-contained index.html — no build step, no dependencies, no backend. Vanilla JavaScript drives the renderer (each word becomes a span so it can be highlighted), the Web Speech API provides narration with boundary events mapped to word offsets for highlighting, and the FileReader API powers drag and drop loading. Hosted on GitHub Pages.
What's next: PDF text extraction, saved reading profiles, more languages and voices, and a browser extension version that restyles any web page in place.
Built With
- css3
- github
- html5
- javascript
- web-speech-api
