Bionic reading under Enchancements

[nulla-git]

Is your feature request related to a problem? Please describe. I'm sort of a slow reader, and I've found bionic reading helps me to read faster.

Describe the solution you'd like An option under Enhancements to switch between bionic reading.

Describe alternatives you've considered I tried to find an undocumented mod for it, but to no cigar. I have found bold text to help somewhat though.

Additional context Bionic reading is where half of each word in a sentence is bolded, and the brain fills in the rest of the word.

[virtadpt]

This would probably be a good place to start.

[noirscape]

I'd like to point out that there's no actual evidence that bionic reading as a technique actually works, and in fact it seems to have the opposite result (see linked article).

The entire thing seems to have been a marketing campaign (which also is backed up by some dodgy patent and trademark registrations, so there's likely people angling to fish out money from it) by a savvy PR guy.

[GiovanH]

I agree that this is bunk but just for fun I ported the linked extension as a mod:

/* unlikely-to-collide marker to signify nodes we've already hit*/
const marker = 'boldStart' + Math.floor(Math.random() * 1000000);

/* turn a text node into a fragment with bolded spans at the start of every word */
function processTextNode(node) {
  const bits = node.textContent.match(/(\s+|\S+)/g);
  if (!bits) return;
  const newContent = document.createDocumentFragment();
  bits.forEach(bit => {
    /* don't mess with whitespace substrings */
    if (bit.trim().length === 0) {
      newContent.appendChild(document.createTextNode(bit));
      return;
    }
    /* un-embolden last n/2 chars */
    const l = Math.ceil(bit.length / 2);
    newContent.appendChild(document.createTextNode(bit.substring(0, l)));

    const end = document.createElement('span');
    end.style.fontWeight = 'normal';
    end.className = marker;
    end.innerHTML = bit.substring(l, bit.length);
    /* append remainder of word */
    newContent.appendChild(end);
  });
  node.innerHTML = '';
  node.replaceWith(newContent);
};

/* recurse into the DOM and process any text nodes */
function recurseNodes(node) {
  const ignoreTags = {
    META: true,
    LINK: true,
    SCRIPT: true,
    STYLE: true,
  };
  /* don't mess with non-visible nodes */
  if (ignoreTags[node.nodeName]) {
    return;
  }
  /* don't reprocess former text nodes we've already hit */
  if (node.querySelector && node.querySelector(`:scope > .${marker}`)) {
    return;
  }
  if (node.nodeName === '#text') {
    processTextNode(node);
    return;
  }

  [...node.childNodes].reverse().forEach(n => recurseNodes(n));
};

module.exports = {
  title: "Bionic Reading",
  summary: "It stinks 👌",
  author: "GiovanH",
  modVersion: 0.1,

  vueHooks: [{
    matchName: "TabFrame",
    mounted() {
      this.$nextTick(() => {
        recurseNodes(this.$el);
      })
    },
    updated() {
      this.$nextTick(() => {
        recurseNodes(this.$el);
      })
    }
  }]
}