https://github.com/gumball12/text-vide

An Open-Source JavaScript Implementation of Bionic Reading.
https://github.com/gumball12/text-vide

bionic bionic-reading fixation-points highlighted readable reading text

Last synced: 11 months ago
JSON representation

An Open-Source JavaScript Implementation of Bionic Reading.

• Host: GitHub
• URL: https://github.com/gumball12/text-vide
• Owner: Gumball12
• License: mit
• Created: 2022-05-21T13:14:45.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-01-22T02:14:42.000Z (about 2 years ago)
• Last Synced: 2024-10-05T12:33:52.851Z (over 1 year ago)
• Topics: bionic, bionic-reading, fixation-points, highlighted, readable, reading, text
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/text-vide
• Size: 766 KB
• Stars: 248
• Watchers: 5
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# TextVide (vide; Latin for "see")

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/text-vide)](https://www.npmjs.com/package/text-vide) ![[npm downloads]((https://img.shields.io/bundlephobia/minzip/text-vide))](https://img.shields.io/npm/dm/text-vide) ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/text-vide) ![GitHub package.json version (subfolder of monorepo)](https://img.shields.io/github/package-json/v/Gumball12/text-vide?filename=packages%2Ftext-vide%2Fpackage.json) [![changelog](https://img.shields.io/badge/CHANGELOG-gray)](./CHANGELOG.md)

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

![logo](./docs/logo-extended.png)

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

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

This module is an open source implementation that mimics the behavior of the [Bionic Reading API](https://bionic-reading.com/).

It does not require any additional licenses, except for MIT. ([#38](https://github.com/Gumball12/text-vide/issues/38))

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

- _[I don't think it's going to be more readable](./ABOUT_READABILITY.md)_

- _[CONTRIBUTING.md](./CONTRIBUTING.md)_

## 💫 Features

| Feature                                                                 | State |

| ----------------------------------------------------------------------- | ----- |

| [Support all languages](https://github.com/Gumball12/text-vide/pull/16) | ✅    |

| [Support ESM and CommonJS](#usage)                                      | ✅    |

| [Custom `sep` Style](#options-sep)                                      | ✅    |

| [Fixation-Points](#options-fixationpoint)                               | ✅    |

| [Ignore HTML Tags](#options-ignorehtmltag)                              | ✅    |

| [Ignore HTML Entity](#options-ignorehtmlentity)                         | ✅    |

| [Saccade](https://github.com/Gumball12/text-vide/issues/21)             | ❌    |

### Benchmark

```

Sun Aug 07 2022 01:33:40 GM +0900

length of normal text: 590

length of text with html tags: 1579

normal#ignoreHtmlTags x 46,106 ops/sec ±4.22% (86 runs sampled)

normal#notIgnoreHtmlTags x 53,200 ops/sec ±0.93% (89 runs sampled)

withHtmlTags#ignoreHtmlTags x 3,213 ops/sec ±0.92% (87 runs sampled)

withHtmlTags#notIgnoreHtmlTags x 3,605 ops/sec ±1.59% (87 runs sampled)

```

[code](./apps/benchmark/index.js)

## ⚙️ Install

```bash

npm i text-vide

yarn add text-vide

pnpm add text-vide

```

### CDN

```html

```

## 📖 Usage

### Browser

```html

  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.textVide(text);

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

```

### ESM

```ts

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); // 'Bionic Reading ... written content.'

```

### CommonJS

```ts

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); // 'Bionic Reading ... written content.'

```

## 📚 API

### `textVide(text: string, options?: Options)`

```ts

textVide('text-vide');

textVide('text-vide', {

  // ... Options

});

```

### Options

```ts

type Options = Partial<{

  sep: string | string[];

  fixationPoint: number;

  ignoreHtmlTag: boolean;

  ignoreHtmlEntity: boolean;

}>;

```

#### `sep`

- Default: `['', '']`

Passing a string allows you to specify the Beginning and End of the highlighted word at once.

```ts

textVide('text-vide', { sep: '**' }); // '**tex**t-**vid**e'

```

It can also set them up by passing a list of length 2.

```ts

textVide('text-vide', { sep: ['', ''] }); // 'text-vide'

```

#### `fixationPoint`

- Default: `1`

- Range: `[1, 5]`

```ts

// Default fixation-point: 1

textVide('text-vide'); // 'text-vide'

// Changed fixation-point: 5

textVide('text-vide', { fixationPoint: 5 }); // 'text-vide'

```

#### `ignoreHtmlTag`

- Default: `true`

If this option is `true`, HTML tags are not highlighted.

```ts

textVite('
abcd
efg'); // '


abcd
efg'

textVite('
abcd
efg', { ignoreHtmlTag: false }); // '<div>abcddiv>efg'

```


#### `ignoreHtmlEntity`

- Default: `true`

If this option is `true`, HTML entities are not highlighted.

```ts

textVide(' abcd>'); // ' abcd>'

textVide(' abcd>', { ignoreHtmlEntity: false }); // &nbsp;abcd&gt;

```

## License

[MIT](./LICENSE) @Gumball12

It does not require any additional licenses, except for MIT. ([#38](https://github.com/Gumball12/text-vide/issues/38))

## Why Monorepo?

I acknowledge that the current monorepo structure might seem complex for the project's requirements. Here's why I chose this approach:

- This project served as a learning experience for implementing monorepo architecture, as I was preparing to introduce it at my workplace

- I intentionally used this small project as a practical exercise to understand monorepo concepts and best practices

- While the current structure might be over-engineered, I plan to maintain it since:

  - The project requirements are relatively stable

  - Major changes or additions are unlikely

- However, I'm open to simplifying the architecture if there's a compelling reason to do so