voladelta / text-vide

An Open-Source JavaScript Implementation of Bionic Reading.

text-vide

Support all languages that separate words with spaces

Try on Runkit or Online Sandbox

An Open-Source JavaScript Implementation of Bionic Reading API.

How was this made?

💫 Features

Feature	State
HTML Mode	✅
Markdown Mode	✅
Custom HTML or Markdown Style	✅
Fixation-Points	✅
Saccade	#21

⚙️ Install

npm i text-vide
yarn add text-vide
pnpm add text-vide

📖 Usage

ESM (Browser)

import { textVide } from 'text-vide';

const text =
  'Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. In a digital world dominated by shallow forms of reading, Bionic Reading aims to encourage a more in-depth reading and understanding of written content.';

const highlightedText = textVide(text);

console.log(highlightedText); // '<b>Bion</b>ic <b>Readi</b>ng ... <b>writt</b>en <b>conte</b>nt.'

CommonJS (NodeJS)

const { textVide } = require('text-vide');

const text =
  'Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. In a digital world dominated by shallow forms of reading, Bionic Reading aims to encourage a more in-depth reading and understanding of written content.';

const highlightedText = textVide(text);

console.log(highlightedText); // '<b>Bion</b>ic <b>Readi</b>ng ... <b>writt</b>en <b>conte</b>nt.'

📚 API

textVide(text: string, options?: Options)

textVide('text-vide');
textVide('text-vide', {
  // ... Options
});

Options

type Options = Partial<{
  sep: string | string[];
  fixationPoint: number;
}>;

sep

• Default Value: ['<b>', '</b>']

Passing a string allows you to specify the Beginning and End of the highlighted word at once.

textVide('text-vide', '**'); // '**tex**t-**vid**e'

It can also set them up by passing a list of length 2.

textVide('text-vide', ['<strong>', '</strong>']); // '<strong>tex</strong>t-<strong>vid</strong>e'

fixationPoint

• Default Value: 1
• Range: [1, 5]

// Default fixation-point: 1
textVide('text-vide'); // '<b>tex</b>t-<b>vid</b>e'

// Changed fixation-point: 5
textVide('text-vide', { fixationPoint: 5 }); // '<b>t</b>ext-<b>v</b>ide'

License

MIT @Gumball12