ReadAble

ReadAble is a Chrome extension that makes web pages easier to read for people with dyslexia and other reading difficulties. It can switch a page to the OpenDyslexic font, add space between letters and lines, enlarge text, apply high contrast and put a reading ruler under your cursor. Every setting can apply to all sites or to just the one you're on.

Install from the Chrome Web Store

Features

• OpenDyslexic font. Replaces page fonts with OpenDyslexic, including text inside iframes and tables, and wins against sites that force their own font with !important. Code blocks, form fields, rich text editors and icon fonts keep their original font.
• Text size. Scale text from 0.5× to 2× (up to 1.35× while OpenDyslexic is on, since the font runs wider). Only text elements are resized, so page layout stays intact.
• Letter and line spacing. Letter spacing up to 0.5em (0.4em with OpenDyslexic) and line height from 1 to 3.
• High contrast. Built on Dark Reader, with a few modes to pick from. The default uses a black background with white text, yellow links and cyan accents. "Dark mode B/W" is a plain black and white dark theme, and "Custom" lets you pick background, text, link, accent and disabled colors yourself.
• Reading aids. The ruler draws a colored band that follows your cursor. The focus mask dims everything above and below the line you're reading. Height and opacity are adjustable, and the ruler color can be changed.
• Reader mode. Pulls the main article out of a cluttered page with Mozilla Readability and shows it in a clean view that uses your own reading settings. If it can't find the article, select the text you want and run it again.
• Per-site preferences. Choose "All sites" or "This site" at the top of the popup. Site settings override your global ones until you switch back.
• Disable on a site. Turn ReadAble off for a domain and its subdomains with one toggle.
• Paused on web apps. ReadAble stays off on editors and web apps where restyling would break things, such as Google Docs, Gmail, Notion, Figma, Office 365 and online code editors. The full list is PAUSED_SITE_RULES in src/content.js.
• Recommended preset. One click turns on OpenDyslexic with 115% text, 1.65 line spacing and light letter spacing. It's offered on first install and in the popup.
• Synced settings. Preferences are stored with chrome.storage.sync, so they follow you to any Chrome where you're signed in.

Privacy

ReadAble has no server and sends no analytics.

• Settings live in chrome.storage.sync, which Chrome syncs between your own signed-in browsers.
• The install date and a few usage counters (popup opened, preset applied, reader mode succeeded or failed) are kept in chrome.storage.local on your device. They are never transmitted anywhere.
• Reader mode keeps the extracted article in chrome.storage.session, which Chrome clears when the browser closes.
• On uninstall, Chrome opens an optional feedback survey hosted on Tally. The only data in its URL is the extension version.

Permissions

Permission	Why it's needed
storage	Saves your settings and the list of sites where ReadAble is disabled.
scripting	Re-injects the content script into a tab that was open before install, and runs reader mode extraction on demand.
activeTab	Lets the popup act on the tab you're looking at.
Content script on <all_urls>	Applies your settings as soon as a page loads, inside frames included.

Building from source

You'll need Node.js 20.19 or newer (development uses Node 24) and npm. Packaging also uses the zip and unzip command line tools, which ship with macOS and most Linux distributions.

git clone https://github.com/BaconMan1168/read-able.git
cd read-able
npm ci
npm run build

Then load the build in Chrome:

1. Open chrome://extensions.
2. Turn on Developer mode.
3. Click Load unpacked and select the dist folder.

After changing code, run npm run build again and click the reload icon on the extension's card.

Reproducing a release

The version number lives in public/manifest.json. Each version sent to the Chrome Web Store has a commit titled build: package extension release <version>, and package-lock.json pins every dependency, so a clean install from that commit rebuilds the same extension.

git log --oneline --grep "package extension release"
git checkout <commit>
npm ci
npm run package

npm run package builds dist/ and zips it into dist.zip. It then runs scripts/verify-package.mjs, which fails if the zip and dist/ differ in any file.

Development

Command	What it does
npm run build	Builds the extension into dist/.
npm run lint	Runs ESLint.
npm test	Runs the unit tests in test/ with Node's built-in test runner.
npm run test:rise	Opens the Rise-style font regression page (see below).
npm run package	Builds the store zip and checks it against dist/.
npm run dev	Starts the Vite dev server. Handy for popup styling, but chrome.* APIs only work inside the loaded extension.

Project layout

public/
  manifest.json        Extension manifest
  background.js        Service worker for first-run setup and the uninstall survey
  fonts/OpenDyslexic/  Font files (the build keeps only the four woff2 files)
src/
  App.jsx              Toolbar popup
  content.js           Content script that restyles pages
  reader-extract.js    Readability extraction, injected when reader mode starts
  reader.jsx           Reader mode page
  onboarding.jsx       First-run page
  settings.js          Default settings and the recommended preset
scripts/
  verify-package.mjs   Checks dist.zip against dist/
test/
  font-cascade.test.mjs
  rise-fixture/        Manual regression page

Vite builds the popup, onboarding and reader pages. The two content scripts are bundled separately with esbuild as IIFEs, because Chrome content scripts can't be ES modules. See vite.config.js.

Rise-style font regression fixture

Some course platforms (Articulate Rise among them) set their font with !important inside iframes. To check that OpenDyslexic still wins there, load the unpacked extension and run:

npm run test:rise

Turn on OpenDyslexic for the page that opens, then click Run checks. The fixture recreates the competing .fr-view font rule inside an iframe and checks lesson paragraphs, table text, code and editable controls.

Contributing

Bug reports and pull requests are welcome on GitHub. If a site renders badly, please include its URL (or a small HTML file that reproduces the problem) and the settings you had on.

Before opening a pull request, run npm run lint and npm test, and try the change on a couple of real sites with the unpacked build. Commit messages follow Conventional Commits.

Publishing a new version

1. Bump version in public/manifest.json. It must be higher than the version currently on the store.
2. Run npm run package.
3. Upload dist.zip in the Chrome Web Store Developer Dashboard.

Adding a permission to the manifest makes Chrome ask existing users to approve it again on update, so keep the permission list short.

Credits

• OpenDyslexic by Abbie Gonzalez, under the SIL Open Font License 1.1
• Dark Reader, MIT
• Mozilla Readability, Apache 2.0
• React and Vite

Bundled license texts are in public/THIRD_PARTY_NOTICES.txt and public/fonts/OpenDyslexic/OFL.txt.

License

ReadAble is released under the MIT License. The bundled font and libraries keep their own licenses.