Add a dyslexia-friendly reading font - #12
Merged
Merged
Conversation
Adds a dyslexia-friendly reading font, behind an "Aa" button. The typeface is OpenDyslexic by Abbie Gonzalez (font version 0.920, packaged as @fontsource/opendyslexic 5.3.0), under the SIL Open Font License 1.1, self-hosted -- licence text sits beside the woff2 files. Dyslexie itself, the commercial face this is modelled on, cannot be shipped: its free tier is a personal home-use licence and web embedding needs a paid one. js/dyslexia-font.js is self-contained and carries its own CSS. Nothing downloads until a reader turns the switch on, because a browser fetches a @font-face only once a rule using that family matches a rendered element, and the only such rules sit under html.dyslexic-font. The font directory is resolved against the script own URL rather than the site root, so it is right under a project subpath as well as an apex domain. Verified in headless Chromium: 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, 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 Italian and French children with dyslexia, with no training and no change of typeface; the British Dyslexia Association style guide asks for 1.5 line spacing, wider word spacing and ragged-right text. The typeface trials are weaker -- Kuster et al. (Annals of Dyslexia, 2018) found Dyslexie gave no benefit over Arial. So the font is offered and the spacing is applied. Both are scoped to running text, so navigation and controls keep their layout, and code keeps its monospace. Latin only, by design: the face has no Indic glyphs, so text in Devanagari, Bengali, Tamil, Telugu, Gujarati, Odia or Kannada falls through to its existing stack and is untouched. 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. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01B2G8v4sBXZZHayZqhAeGgb
The button shipped neutral: a hairline border in currentColor and a fixed blue when on. It now takes the site tokens, passed on the script tag (data-accent, data-radius and, where a house style calls for it, data-border-width and data-font) and read by the module into custom properties on the button. The attributes point at the site own variables rather than literal colours, so the button follows the site into dark mode for free: a var() resolves where it is used. "On" is the accent as an outline over a 16% wash of itself, with the label left at whatever ink the surrounding bar uses. Filling the button with the accent was the first idea and it does not survive measurement, because these sites swap accents between themes and an ink that clears 4.5:1 against one fails against the other. Putting the accent in the label only moves the problem: measured across the sites, Democracy by Design blue came out at 3.34:1 and How India Lives #0EA5E9 at 2.77:1 in light mode. Leaving the ink alone cannot go wrong, because it is the ink the site already chose for that bar. Checked in headless Chromium in both colour schemes, compositing every background behind the button rather than trusting one declaration: every site now measures between 10.1 and 18.9 to 1. State is still legible without colour, since the label renders in OpenDyslexic when the switch is on, and aria-pressed carries it for a screen reader. 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, which joins the existing theme selector.
OpenDyslexic by Abbie Gonzalez (font version 0.920, packaged as
@fontsource/opendyslexic5.3.0), SIL Open Font License 1.1, self-hosted with the licence text beside the woff2 files. Nothing downloads until a reader turns the switch on, 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 and no change of typeface, while Kuster et al. (Annals of Dyslexia, 2018) found Dyslexie gave no benefit over Arial. Scoped to running text, so filters and resource cards keep their layout.
The button takes
--color-accentand--radius-sm, so it follows the site into dark mode without a second rule.build.pywritesdata/resources.jsonand assets rather than the pages, so nothing here is regenerated over.Type of change
Checklist
🤖 Generated with Claude Code
https://claude.ai/code/session_01B2G8v4sBXZZHayZqhAeGgb
Generated by Claude Code