Add: dyslexia-friendly reading font - #14
Merged
Merged
Conversation
OpenDyslexic by Abbie Gonzalez (font version 0.920, packaged as @fontsource/opendyslexic 5.3.0), SIL Open Font License 1.1, self-hosted. The module and the four faces go in public/, which Vite copies to the build root, so the tag in index.html is root-absolute and correct in the built app. The app has no bar to put the control in -- ThemeToggle is itself a fixed button -- so the "Aa" button takes the bottom-left corner. Nothing downloads until it is pressed: a browser fetches a @font-face only once a rule using that family matches a rendered element. Verified against a real production build (npm run build, served from build/): zero font requests in the default state, 200s and a computed family of OpenDyslexic once the class lands. The switch also opens up letter, word and line spacing, the half with the better evidence (Zorzi et al., PNAS 109(28), 2012, found extra letter spacing raised reading speed and halved errors in children with dyslexia, with no training; Kuster et al., Annals of Dyslexia, 2018, found Dyslexie gave no benefit over Arial). package-lock.json is deliberately not committed: it was generated by the verification build and the repository has never tracked one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B2G8v4sBXZZHayZqhAeGgb
On two of the sibling sites .theme-toggle is the <button> itself rather than a container, so the module would have appended a button inside a button -- invalid markup that the parser reparents, putting the control somewhere nobody chose. host() now takes the parent row when the match is a BUTTON, A, INPUT, LABEL or SELECT, and also recognises .theme-toggle-group and .themebar, which two of these sites use. No effect here, where the app has no bar and the button stays in the corner, but the module is the same file in every repository. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B2G8v4sBXZZHayZqhAeGgb
It was generated by the build I ran to verify the reading-font change and the pre-commit hook staged it, against what the previous commit message said. The repository has never tracked a lockfile and this change is no reason to start; 2,813 lines of dependency graph do not belong in it. Ignored so the next person running npm install does not re-add it by accident. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B2G8v4sBXZZHayZqhAeGgb
data-accent on the script tag points at --accent-primary, the amber this app already uses, so the button takes the site's colour rather than a neutral blue, and follows the app's own theme because a var() resolves where it is used rather than where it is declared. "On" is that accent as an outline over a 16% wash of itself, with the label left at the surrounding ink. Filling the button instead needs an ink that clears 4.5:1 against whatever the accent is, and these sites swap accents between themes; leaving the ink alone cannot go wrong. Checked in headless Chromium in both colour schemes against a real production build. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B2G8v4sBXZZHayZqhAeGgb
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Adds a dyslexia-friendly reading font behind an Aa button. The app has no bar to put a control in, since
ThemeToggleis itself a fixed button, so this one takes the bottom-left corner.OpenDyslexic by Abbie Gonzalez (font version 0.920, packaged as
@fontsource/opendyslexic5.3.0), SIL Open Font License 1.1, self-hosted. The module and the four faces go inpublic/, which Vite copies to the build root, so the tag inindex.htmlis root-absolute and correct in the built app.Nothing downloads until the button is pressed, because a browser fetches a
@font-faceonly once a rule using that family matches a rendered element. The switch also opens up letter, word and line spacing, which is the half with the better evidence: Zorzi et al. (PNAS 109(28), 2012) found extra letter spacing raised reading speed and halved errors in children with dyslexia, with no training, while Kuster et al. (Annals of Dyslexia, 2018) found Dyslexie gave no benefit over Arial.The button takes
--accent-primary, the amber this app already uses, for its "on" outline and wash.package-lock.jsonis deliberately not committed and is now gitignored: it was generated by the verification build and this repository has never tracked one.Type of change
Checklist
npm run build, served frombuild/), both colour schemes: zero font requests in the default state, 200s once the class lands🤖 Generated with Claude Code
https://claude.ai/code/session_01B2G8v4sBXZZHayZqhAeGgb
Generated by Claude Code