Dyslexia Text for modules/curriculum

1

I am dyslexic, so I have a hard time keeping my place in the modules/theories when I try to read them, and I’m not typically one to write down what I’m learning. I have found that the Opendyslexic text helps a lot, and there’s a Chrome extension to add it to things, but it does not work on this site. So I am really wondering if there’s an option for people who have a hard time with reading. I’m going to do the courses regardless, but it will make the curriculum easier to go through and much faster, as I would not have to accidentally read the same line 5 times in a row. Any help is appreciated, Thank you!

2

You can also install a text-to-speech browser plugin, that’s helped me focus a lot. Have you tried that or think it would help?

3

Hey @ariannecascaddan

I just tested the extension and was able to apply the OpenDyslexic font to the page’s text. However, I noticed that the font reverted to the default when I navigated away from the page. I assume this is the behavior you’re experiencing?

Looking at the HTML, the extension adds the opendyslexic-font-regular class to the body element. But apparently the extension doesn’t monitor the page for changes, so if the page is rebuilt and the original body element is replaced, the extension doesn’t reapply the class.

Ideally this would be addressed by the extension itself. As a workaround, you can toggle OpenDyslexic off and back on to reapply the class.

However, if you’re using / willing to use the Tampermonkey extension, you can add the following script to auto-restore the class:

Code snippet 
// ==UserScript==
// @name         Keep OpenDyslexic Class
// @description  Ensures the body element has the OpenDyslexic class.
// @version      0.1.0
// @match        https://www.freecodecamp.org/learn/*
// @run-at       document-start
// ==/UserScript==

(function () {
  'use strict';

  const CLASS_NAME = 'opendyslexic-font-regular';

  function startInterval() {
    let attempts = 0;
    const maxAttempts = 120;

    const timer = setInterval(() => {
      attempts++;

      if (document.body && !document.body.classList.contains(CLASS_NAME)) {
        document.body.classList.add(CLASS_NAME);
      }

      if (attempts >= maxAttempts) {
        clearInterval(timer);
      }
    }, 500);

    window.addEventListener('pagehide', () => clearInterval(timer), { once: true });
  }

  startInterval();

  window.addEventListener('pageshow', (e) => {
    if (e.persisted) {
      startInterval();
    }
  });
})();

Btw, lessons that involve styling practice validate the result on the page rather than the CSS you write. So if a lesson’s test fails because it detects the OpenDyslexic font instead of the expected font, you’ll need to disable the extension and run the test again.

This probably won’t be an issue, as the extension seems to be much less aggressive than the ones I’ve used / experimented with, but I’m mentioning just in case.