Bionic Reading

Quick and dirty implementation of the Bionic Reading API

Simple Implementation

// bionic.ts
function transform(content: string) {
  const words = content.split(' ');
  const htmlItems = words.map((word) => {
    const len = Math.ceil(word.length * 0.3);
    return `<b>${word.slice(0, len)}</b>${word.slice(len)}`;
  });

  return htmlItems.join(' ');
}

Using with cheerio

// bionic-nodejs.ts
import cheerio from 'cheerio';

function transform(sourceHtml: string) {
  const $ = cheerio.load(sourceHtml, {
    normalizeWhitespace: true,
    decodeEntities: true,
  });

  $('p').each((i, elem) => {
    const htmlItems: string[] = [];
    $(elem)
      .text()
      .split(/\s+/)
      .forEach((word) => {
        const len = Math.ceil(word.length * 0.3);

        htmlItems.push(`<b>${word.slice(0, len)}</b>${word.slice(len)}`);
      });

    const htmlOutput = htmlItems.join(' ');

    $(elem).html(htmlOutput);
  });

  return $.html();
}
Sign up to read blog posts, Twitter threads & newsletter on your Kindle

No spam. No ads. Only great content.