bionic-reading

bionic-reading

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?

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'

Motivations

• bionic-reading.com
• ansh/bionic-reading

License

MIT @Gumball12