unclutter
unclutter copied to clipboard
feat: add bionic reading support
This PR adds in bionic reading via a feature flag; it uses some JavaScript to accomplish bionic reading by taking each word in a paragraph, slicing it in half, and bolding the first half.
More testing is necessary on this since I haven't tested it that well.
https://www.reddit.com/r/webdev/comments/v4o0j5/uncluttering_web_articles_using_css_animations/ib6h5bu/
Wow, this is nice! A great example screenshot:

What do you think about moving the DOM changes to a separate PageModifier
so that we can do the bionic highlighting once all other transitions are done? That way the performance will be better and it'll only modify the uncluttered text.
Two edge cases I noticed:
- Words with apostrophes in them seem to get highlighted twice, e.g.
couldn't
on https://www.npr.org/sections/health-shots/2022/06/16/1104679219/medical-bills-debt-investigation -
<br />
's in text elements seem to be removed, e.g. on http://www.paulgraham.com/say.html
Moving the DOM changes to a separate PageModifier
could work.
As for weird quirks with text selection, I'm not sure how best to fix that. Crafting a more specific RegEx expression could work.
Would be amazing to get this added
@phgn0 Can we take a look at this and merge it? I would really love this feature!