text-vide
Version:
An Open-Source JavaScript Implementation of Bionic Reading.
193 lines (130 loc) • 7.35 kB
Markdown
[](https://www.npmjs.com/package/text-vide) )](https://img.shields.io/npm/dm/text-vide)   [](./CHANGELOG.md)
[](https://github.com/Gumball12/text-vide/actions/workflows/ci.yaml) [](https://codecov.io/gh/Gumball12/text-vide)
> **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. ([
- _[How was this made?](./HOW.md)_
- _[I don't think it's going to be more readable](./ABOUT_READABILITY.md)_
- _[CONTRIBUTING.md](./CONTRIBUTING.md)_
| Feature | State |
| ----------------------------------------------------------------------- | ----- |
| [Support all languages](https://github.com/Gumball12/text-vide/pull/16) | ✅ |
| [Support ESM and CommonJS](
| [Custom `sep` Style](
| [Fixation-Points](
| [Ignore HTML Tags](
| [Ignore HTML Entity](
| [Saccade](https://github.com/Gumball12/text-vide/issues/21) | ❌ |
```
Sun Aug 07 2022 01:33:40 GM +0900
length of normal text: 590
length of text with html tags: 1579
normal
normal
withHtmlTags
withHtmlTags
```
[](./apps/benchmark/index.js)
```bash
npm i text-vide
yarn add text-vide
pnpm add text-vide
```
```html
<script src="https://cdn.jsdelivr.net/npm/text-vide/dist/index.iife.js"></script>
```
```html
<script src="https://cdn.jsdelivr.net/npm/text-vide/dist/index.iife.js"></script>
<script>
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.'
</script>
```
```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); // '<b>Bion</b>ic <b>Readi</b>ng ... <b>writt</b>en <b>conte</b>nt.'
```
```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); // '<b>Bion</b>ic <b>Readi</b>ng ... <b>writt</b>en <b>conte</b>nt.'
```
```ts
textVide('text-vide');
textVide('text-vide', {
// ... Options
});
```
```ts
type Options = Partial<{
sep: string | string[];
fixationPoint: number;
ignoreHtmlTag: boolean;
ignoreHtmlEntity: boolean;
}>;
```
- Default: `['<b>', '</b>']`
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: ['<strong>', '</strong>'] }); // '<strong>tex</strong>t-<strong>vid</strong>e'
```
- Default: `1`
- Range: `[1, 5]`
```ts
// Default fixation-point: 1
textVide('text-vide'); // '<b>tex</b>t-<b>vid</b>e'
// Changed fixation-point: 5
textVide('text-vide', { fixationPoint: 5 }); // '<b>t</b>ext-<b>v</b>ide'
```
- Default: `true`
If this option is `true`, HTML tags are not highlighted.
```ts
textVite('<div>abcd</div>efg'); // '<div><b>abc</b>d</div><b>ef</b>g'
textVite('<div>abcd</div>efg', { ignoreHtmlTag: false }); // '<<b>di</b>v><b>abc</b>d</<b>di</b>v><b>ef</b>g'
```
- Default: `true`
If this option is `true`, HTML entities are not highlighted.
```ts
textVide(' abcd>'); // ' <b>abc</b>d>'
textVide(' abcd>', { ignoreHtmlEntity: false }); // &<b>nbs</b>p;<b>abc</b>d&<b>g</b>t;
```
[](./LICENSE) @Gumball12
It does not require any additional licenses, except for MIT. ([
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