@k4ys4r/wc-bionic-read-help

<wc-bionic-read-help/>

It is a web component written in pure javascript and without any dependencies.
It helps to read better, faster and more focused based on the Bionic Reading method

What is Bionic Reading?

Bionic reading is a new method for reading better, faster and more focused.
It was developed by Renato Casutt a typographic designer from Switzerland.
It aims to highlight text when an artificial fixation points are used to guid eyes. The Bionic Reading combines fixation points and opacity to change the visual surface of the content. It is very helpful for people with dyslexia while their reading and learning process.

Installation

# with npm
npm i @k4ys4r/wc-bionic-read-help

#with yarn
yarn add @k4ys4r/wc-bionic-read-help

Once installed, import it in your application:

import "@k4ys4r/wc-bionic-read-help";

//To get access to the Class properties
import BionicReadHelp from "@k4ys4r/wc-bionic-read-help";
BionicReadHelp.tagName;
BionicReadHelp.attributes;

Usage

1. Make sure you've add wc-bionic-read-help to your app through NPM. See Installation for more details.
2. Add wc-bionic-read-help to your app and placed it at the top.
3. Then it can be used like below:

<wc-bionic-read-help>...</wc-bionic-read-help>

Usage of <wc-bionic-read-help/> attributes

There is four additional attributes that can be used to adjust the opacity, the algorithm, the text color and the bionic mode type:

• brh-opacity : defines the opacity value which can be between 0 and 1 (default value is 0.75).
• brh-color-text : defines the text color, it is in HEX format (default value is #000).
• brh-type : defines the type mode, static or interactive (default value is static ).
• brh-algorithm : defines the algorithm to highlight text (default value is [-1, 0.25, 0.25, 0.35, 0.5, 0.65]).

These attributes can be used as below:

<wc-bionic-read-help
  brh-opacity="0.75"
  brh-type="interactive"
  brh-algorithm="-1 0.5 0.5 0.75 0.65"
  brh-text-color="#000"
>
  ...
</wc-bionic-read-help>

The value of algorithm is positive numbers separated by white-space. Each value will be used to set the level of each word highlighting respecting to its length. the value of -1 is used to ignore this process. Here is an example:

<wc-bionic-read-help brh-algorithm="-1 0.5 1 0.5">
  Bionic read help web component is awesome
</wc-bionic-read-help>

That results:

Bionic read help web component is awesome

The result shows that the values of algorithm define the highlighted word based on their length. Word with length of :

• 1: will be ignored (algorithm value is -1)
• 2: will be half highlighted (algorithm value is 0.5)
• 3: will be totally highlighted (algorithm value is 1)
• 4 and above: will be half highlighted (algorithm value is 0.5)

For more information and to experiment bionic reding with your own text go here.

Example

• Usage with React
• Usage with Vue 3
• Or try it here

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request 😊

License

MIT License