unclutter icon indicating copy to clipboard operation
unclutter copied to clipboard

feat: add bionic reading support

Open ElijahPepe opened this issue 2 years ago • 3 comments

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/

ElijahPepe avatar Jun 05 '22 02:06 ElijahPepe

Wow, this is nice! A great example screenshot:

Screenshot 2022-06-16 at 2 35 09 PM

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

phgn0 avatar Jun 16 '22 12:06 phgn0

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.

ElijahPepe avatar Jun 16 '22 15:06 ElijahPepe

Would be amazing to get this added

NeckBeardPrince avatar Jun 21 '22 14:06 NeckBeardPrince

@phgn0 Can we take a look at this and merge it? I would really love this feature!

ryan6416 avatar Apr 27 '23 02:04 ryan6416