Introduction: What is Bionic Reading?

Have you ever heard about a bionic reading method?

It refers to a technique where the first letters of words are bolded to create “artificial fixation points”. These are supposed to help people with attention span issues (like ADHD) read faster and maintain focus by making eye movement more efficient, although its real effectiveness is still debated.

There is even a company that sells this service: you upload your text, they apply their proprietary bolding algorithm, and then charge an annual fee. LOL.

Instead of using the paid service, we can reproduce the core effect ourselves using TypeScript.

So in this post, I’ll show you how to create an approximation of this algorithm inspired by the bionic reading concept.

---

Why do we use Intl.Segmenter ?

To bold only the word portions, we need a reliable way to distinguish actual words; splitting on spaces isn’t enough, so we use Inlt.Segmenter

INTL.segmenter helps us make a text segmentation, identifying words and punctuation marks

---

Implementation overview

The implementation will consist of three steps:

1- Split text into words and punctuation using Intl.Segementer 2- Identify which segments are actual words 3- Wrap the first “x%” letters of each word in a chosen HTML tag

1. Segmenting the text

So first, we will create a function to segment the text

export function segmentText(text: string) {
  // segment every word in the english language
  const segmenter: Intl.Segmenter = new Intl.Segmenter("en", {
    granularity: "word",
  });
  // segmenter is a type segmenter object so we convert it to an array
  const segments = [...segmenter.segment(text)];
  return segments.filter((segment) => segment.segment.length > 0);
}

---

2. Mapping Over Each Segment

Once we got all the segments on an array we map it

const segments = segmentText(text);

return segments
  .map((segment) => {
    // check if the segment is a word to avoid marking as bold a punctuation
    if (segment.isWordLike) {
      return wrapFixation(segment.segment, options);
    }
    // return punctuation signs
    return segment.segment;
  })
  .join("");

3. Applying the Fixation Percentage

Now that we can extract each word, the next step is to bold a percentage of its letters. That logic lives inside WrapFixation

import type { SmartReadingOptions } from "../types/index.ts";
import { defaultOptions } from "../options.ts";

export function wrapFixation(segment: string, options?: SmartReadingOptions) {
  // if the user doesn't pass options, the default options are assigned

  //export const defaultOptions = {
  //  fixationPercentage: 0.3,
  //  tag: "strong",
  //};
  const { fixationPercentage, tag } = { ...defaultOptions, ...options };
  // get the lenght of the fixation part
  const fixationLength = Math.ceil(segment.length * fixationPercentage);
  // split between the fixation and the rest
  const fixation = segment.slice(0, fixationLength);
  const rest = segment.slice(fixationLength);

  return `<${tag}>${fixation}</${tag}>${rest}`;
}

So with this simple code, we can achieve the “bionic reading” effect. This approximation produces the visual style used by bionic reading tools, which some people report helps with focus and eye movement.

Example of the output

Input

"This is a simple text";

Output

<strong>Th</strong>is <strong>is</strong> a <strong>si</strong>mple
<strong>te</strong>

Results using this script

Limitations and opportunities for improvement

• This script doesn't consider semantic strucutre yet
• It currently supports english only

Future improvements may include:

• Multi-language support
• Smarter fixation logic
• Semantic awareness
• Different output formats (React, Markdown, plain text, etc.)

---

Here is the link to the repo

code repository

Also, here is the npm package if you want to use it on your project

npm package

Thanks for reading!.