Bionic-reading NPM

bionic-reading

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.

⚙️ Install

npm i bionic-reading
yarn add bionic-reading
pnpm add bionic-reading

📖 Usage

ESM (Browser)

import { bionicReading } from 'bionic-reading';

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 bionicText = bionicReading(text);

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

CommonJS (NodeJS)

const { bionicReading } = require('bionic-reading');

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 bionicText = bionicReading(text);

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

📚 API

`BionicReading(text: string, options?: Options)`

bionicReading('bionic-reading'); // '<b>bion</b>ic-<b>readi</b>ng'

Options

type Options = Partial<{
  highlightTag: string;
  markdown: boolean;
  markdownStyle: string;
  fixationPoint: number;
}>;

`highlightTag`

Default Value: 'b'

// default highlight tag: `<b>`
bionicReading('bionic-reading'); // '<b>bion</b>ic-<b>readi</b>ng'

// changed highlight tag: `<strong>`
bionicReading('bionic-reading', { highlightTag: 'strong' }); // '<strong>bion</strong>ic-<strong>readi</strong>ng'

`markdown`

Default Value: false

bionicReading('bionic-reading', { markdown: true, highlightTag: 'strong' }); // '**bion**ic-**readi**ng'

If true, the highlightTag option is ignored.

`markdownStyle`

Default Value: '**'

bionicReading('bionic-reading', { markdown: true, markdownStyle: '__' }); // '__bion__ic-__readi__ng'

If the markdown option is false, this option is ignored.

`fixationPoint`

Default Value: 1
Range: [1, 5]

// default fixation-point: 1
bionicReading('bionic-reading'); // '<b>bion</b>ic-<b>readi</b>ng'

// changed fixation-point: 5
bionicReading('bionic-reading', { fixationPoint: 5 }); // '<b>bi</b>onic-<b>re</b>ading'