The reading demo

The text below is real and unchanged for screen readers. The effect you see is purely visual. Press Esc at any time, or use the reveal control, to see the original instantly.

A friend who has dyslexia described to me how she experiences reading. She can read, but it takes a lot of concentration, and the letters seem to jump around.

I remembered reading about typoglycemia — the effect where you can still read a word even when its inner letters are scrambled, as long as the first and last letters stay in place. Wouldn’t it be possible to do that interactively, on a website, with JavaScript? Sure it would.

Dyslexia is characterized by difficulty with learning to read fluently and with accurate comprehension despite normal intelligence. This includes difficulty with phonological awareness, phonological decoding, processing speed, orthographic coding, auditory short-term memory, language skills and verbal comprehension, and rapid naming.

Developmental reading disorder is the most common learning disability. Dyslexia is the most recognized of reading disorders, however not all reading disorders are linked to dyslexia.

Some see dyslexia as distinct from reading difficulties resulting from other causes, such as a non-neurological deficiency with vision or hearing, or from poor or inadequate reading instruction. It is considered a receptive language-based learning disability, and it can also affect a person’s expressive language skills.

Math content

Applied to math, the scramble garbles the words but leaves the equation itself intact. Perception, Visual wobble, Blur / focus drift, and Letter fragments are available for math content too.

Screen readers can interact with the equation and read it aloud: any user can step through it character by character, and capitalization is announced by an audio tone or shift in pitch as it’s read, set manually in the screen reader’s settings. General text-to-speech, by contrast, reads the words and Greek letters but not the math symbols. To hear the math itself, NVDA needs the MathCAT add-on; and if an equation is served as an SVG image (as MathJax sometimes does), it can be unreadable — right-click it (or press Shift + F10) and choose Math Settings → Math Renderer → HTML-CSS so it can be read.

Data table

Every effect runs on this table too — the headers, group names, Greek letters, dates, times, numbers, and email addresses are all simulated. Nothing here is left alone.

It also makes the case for accessible marketing. Outreach leans on dates, times, phone numbers, and email addresses — content that reaches everyone only when it stays real, selectable text. See the difference for yourself: let your screen reader or text-to-speech read this table, then try the same details saved as an image. Only one of them will read aloud.

Fictional directory of Greek-letter groups, with their uppercase and lowercase Greek letters, a date, a time, a fictional 800 number, and an email contact.
Dataset Uppercase Greek letter Lowercase Greek letter Date Time Fictional 800 number Company connection
Alpha Group Αα03/14/19939:15 AM1-800-555-1234 contact@alphagroup.com
Beta Group Ββ11/22/199310:30 AM1-800-555-2487 help@betagroup.org
Gamma Group Γγ05/18/19941:45 PM1-800-555-3921 support@gammagroup.edu
Delta Group Δδ09/07/19943:20 PM1-800-555-4768 holla@deltagroup.com
Epsilon Group Εε01/26/19958:05 AM1-800-555-5893 csupport@epsilongroup.org
Zeta Group Ζζ06/11/199511:10 AM1-800-555-6712 contact@zetagroup.edu
Eta Group Ηη07/22/19962:40 PM1-800-555-7349 help@etagroup.com
Theta Group Θθ12/09/19964:55 PM1-800-555-8465 support@thetagroup.org
Iota Group Ιι09/13/19979:50 AM1-800-555-9582 holla@iotagroup.edu
Kappa Group Κκ04/28/199812:25 PM1-800-555-2196 csupport@kappagroup.com
Lambda Group Λλ11/04/19985:10 PM1-800-555-3674 contact@lambdagroup.org
Mu Group Μμ02/16/19998:35 AM1-800-555-4289 help@mugroup.edu
Nu Group Νν03/29/200010:05 AM1-800-555-5126 support@nugroup.com
Xi Group Ξξ08/21/20001:15 PM1-800-555-6048 holla@xigroup.org
Omicron Group Οο05/06/20013:45 PM1-800-555-7291 csupport@omicrongroup.edu
Pi Group Ππ10/19/200111:35 AM1-800-555-8357 contact@pigroup.com
Rho Group Ρρ07/03/20022:05 PM1-800-555-9463 help@rhogroup.org
Sigma Group Σσ / ς12/27/20024:15 PM1-800-555-1842 support@sigmagroup.edu
Tau Group Ττ09/30/20039:25 AM1-800-555-2975 holla@taugroup.com
Upsilon Group Υυ04/12/200412:50 PM1-800-555-3869 csupport@upsilongroup.org
Phi Group Φφ11/23/20053:05 PM1-800-555-5418 contact@phigroup.edu
Chi Group Χχ06/08/200610:40 AM1-800-555-6784 help@chigroup.com
Psi Group Ψψ01/17/20071:30 PM1-800-555-7936 support@psigroup.org
Omega Group Ωω02/24/20085:25 PM1-800-555-9876 holla@omegagroup.edu

The table reads correctly with screen readers and text-to-speech — the real content stays in the accessibility tree, untouched by the visual effects. Greek-letter pronunciation, though, varies from one engine to the next: test your own screen reader or text-to-speech voice (VoiceOver included) against the Greek columns to confirm which letters are spoken aloud.

Take it to any page

Victor Widell, who built the original demo, suggested turning it into a bookmarklet but never did — so here it is. It applies only the original Letter scramble, not the other effects on this page, which can’t be applied safely to arbitrary sites.

About the modes

Letter scramble
The inner letters of a word are shuffled while the first and last letters stay put. This is the original 2016 effect. You can also include the first and last letters for a harder, full anagram.
Letter flips (b / d / p / q)
The classic confusable pairs are mirrored or flipped, the reversal errors many beginning and dyslexic readers report.
Jumping letters
Letters switch places with the word directly above or below them, so the eye keeps losing its place between rows — an experience dyslexic readers have reported. Letters with nothing above or below — at the start or end of the text, or beside a paragraph gap — stay put, because there is nothing to switch with.
Letter fragments
Part of every letter is removed, so each word must be decoded slowly. Lower removal sizes echo the dyslexic effort of decoding; higher sizes evoke a low-vision experience of black text on white, where the white overpowers the characters. It was inspired by Daniel Britton’s Dyslexia typeface, which simulated visual perceptual anomalies.
Perception alphabet
A per-letter distortion — mirroring, rotation, baseline drift, and fading — that approximates how some people with learning or developmental disabilities describe seeing characters: unstable shapes that shift and reverse rather than sitting still.
Visual wobble
Letters drift and tremble, so the line never holds still — a reading disorder some people experience. The Speed and Intensity sliders show the range of movement different readers describe, and how distracting it is to read against.
Blur / focus drift
Focus slips in and out — the way tired eyes lose a sharp edge, the way some people with low vision experience text on white backgrounds, and the way text can look before someone starts wearing glasses.
Crowding
Spacing tightens until letters and words press together and the white “rivers” between words vanish — a reading experience described by people with dyslexia, Irlen Syndrome, and other reading disorders, and sometimes by those prior to wearing glasses.
Black-hole lens (vision field loss)
A movable field of vision loss that bends, or “refracts,” the text at its edge. Tunnel is the Retinitis pigmentosa experience: peripheral vision is lost first, so a clear window survives at the centre while darkness closes in from the edges — reading shrinks to scanning a narrow tunnel. Central scotoma inverts it into a dark hole that sits over wherever you look, hiding the very thing you are trying to read; that pattern is closer to macular degeneration than to RP, and is labelled as such. The refraction can magnify the text outward or, with Pull inward, pinch it into the field edge like a true black hole. Because the loss moves with the eye, the lens can follow your pointer, drift on its own, or be placed with the X / Y sliders. There is also a for-fun option to render an actual black hole — a glowing event horizon and accretion ring — where the dark spot sits.

Credits & sources