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.
Bionic Read Help Web Component
It is a web component written in pure javascript and without any
dependencies.
It can be used to extend the HTML paragraph element like below:
<wc-bionic-read-help> ... </wc-bionic-read-help>
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 :
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)
More example
Here you can experience the Interactive mode
In this mode a toolbar is added to the paragraph to adjust opacity, color and algorithm.