![](/style/images/good.png)
26
![](/style/images/bad.png)
GitHub - Gumball12/bionic-reading: An Open-Source JavaScript Implementation of B...
source link: https://github.com/Gumball12/bionic-reading
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
bionic-reading
This project will be changed to another name soon. (#27)
Support all languages that separate words with spaces
An Open-Source JavaScript Implementation of Bionic Reading API.
Features
Feature | State |
---|---|
HTML Mode | ![]() |
Markdown Mode | ![]() |
Custom HTML or Markdown Style | ![]() |
Fixation-Points | ![]() |
Saccade | #21 |
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
License
MIT @Gumball12
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK