# bionic-reading

> An Open-Source JavaScript Implementation of Bionic Reading.

Latest version **1.4.0** (published 2022-05-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install bionic-reading
pnpm add bionic-reading
yarn add bionic-reading
bun add bionic-reading
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2022-05-28 |
| First published | 2022-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 284 |
| Author | Gumball12 |
| Maintainers | gumball12 |
| Keywords | bionic-reading, bionic reading, bionic, reading, readable, text, highlighted, fixation-points |

## Links

- npm: https://www.npmjs.com/package/bionic-reading
- Repository: https://github.com/Gumball12/bionic-reading
- Homepage: https://github.com/Gumball12/bionic-reading#readme
- Issues: https://github.com/Gumball12/bionic-reading/issues
- npm.io page: https://npm.io/package/bionic-reading

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 1.4.0 (latest) — 2022-05-28
- 1.3.2 — 2022-05-27
- 1.3.1 — 2022-05-27
- 1.2.3 — 2022-05-26
- 1.2.2 — 2022-05-23
- 1.2.1 — 2022-05-22
- 1.2.0 — 2022-05-22
- 1.1.0 — 2022-05-21
- 1.0.2 — 2022-05-21

## README

# bionic-reading

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/bionic-reading)](https://www.npmjs.com/package/bionic-reading) ![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/Gumball12/bionic-reading?filename=packages%2Fbionic-reading%2Fpackage.json) [![changelog](https://img.shields.io/badge/CHANGELOG-gray)](./CHANGELOG.md)

[![ci](https://github.com/Gumball12/bionic-reading/actions/workflows/ci.yaml/badge.svg)](https://github.com/Gumball12/bionic-reading/actions/workflows/ci.yaml) [![codecov](https://codecov.io/gh/Gumball12/bionic-reading/branch/main/graph/badge.svg?token=MsLDgzri5B)](https://codecov.io/gh/Gumball12/bionic-reading)

> **Support all languages that separate words with spaces**

> [Try on Runkit](https://npm.runkit.com/bionic-reading) or [Online Sandbox](https://gumball12.github.io/bionic-reading/)

An Open-Source JavaScript Implementation of [Bionic Reading API](https://bionic-reading.com/).

[How was this made?](./HOW.md)

## ⚙️ Install

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

## 📖 Usage

### ESM (Browser)

```ts
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)

```ts
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)`

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

### Options

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

#### `highlightTag`

- Default Value: `'b'`

```ts
// 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`

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

If true, the `highlightTag` option is ignored.

#### `markdownStyle`

- Default Value: `'**'`

```ts
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]`

```ts
// 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](https://bionic-reading.com/)
- [ansh/bionic-reading](https://github.com/ansh/bionic-reading)

## License

[MIT](./LICENSE) @Gumball12

---
_Source: https://npm.io/package/bionic-reading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._