Package Exports

text-vide
text-vide/dist/index.js
text-vide/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (text-vide) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

text-vide

GitHub package.json version (subfolder of monorepo)

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