Web Component based off of the Spritz speed reading technique
npm install spritz-uiWeb Component based off of the Spritz speed reading technique.
Spritz analyzes content and presents it to the reader one word at a time in a window we call the redicle. One key letter in each word is highlighted. We we call this letter the “Optimal Recognition Point” (ORP). Our redicle keeps your eyes focused on the ORP, allowing you to read, comprehend, and retain information without the need to move your eyes.
Readsy is powered by Spritz.
This package mimicks the features of Spritz as a web component.
You can just add the unpkg link to the top of your page.
``html`
Otherwise, install and bundle.
`sh`
npm i spritz-ui
Then import the component on the page.
`js`
import 'spritz-ui';Usage
Just put the component on the page which has the initialization script.
`html`
Note: the UI does not come with controls. You will need to provide your own controls. The demo has a sample of how these could be made.
This is an of another element on the page which holds the content expected to be processed and displayed through the component.####
index
This is a representation of where in the passage the component is currently. Increasing or decreasing this number will more the display forward or backward. A value of will clear the display.####
status
This has 3 possible values:
- - Currently not playing or displaying content.
- playing - About to or currently cycling through each word in the passage.
- paused - Currently displaying the more recent word but cycling has stopped.While you could change these attributes directly, it is recommended to call the methods to control the component instead.
$3
The words-per-minute to display in the component, default is set to 250. Must be a whole number greater than 0.$3
#### fastbackward()
Sends the display back one sentence.####
Sends the display forward one sentence.####
Pauses the display where it currently is.####
Begins displaying each word at the provided .####
process(text)
Processes the given text to be displayed in the component. This is called automatically when provided an element to the content attribute.####
stepbackward()
Sends the display back one word.####
Sends the display forward one word.####
Stops the display, resetting to the beginning.Events
Each method above has an associated event that is fired with the following exceptions:-
, play(), and pause() use their status as events (stopped, playing, paused);
- Once process() has completed, the component will fire the ready event.Examples:
`js
const ui = document.querySelector('spritz-ui');
ui.addEventListener('stepforward', () => { console.log('Spritz UI stepped forward') });
ui.addEventListener('stopped', () => { console.log('Spritz UI has stopped') });
ui.addEventListener('ready', () => { console.log('Spritz UI is ready to play') });
`Additional features
There have been a few features that go beyond the component that this was originally inspired from.
$3
In additional to jumping to a previous or next word, this component can also jump to the previous and next sentences.$3
This component has a built-in list of punctuation exceptions. This is so the component doesn't falsly pause on words that don't actually end sentences.$3
The component will identify different kinds of characters expected to wrap text; specifically brackets and quotes. It will display the wrapping on the outside of the reader for the duration of the wrapping. While you're unable to turn this off completely, you can hide the wrappings with CSS.css
spritz-ui[prewrap]:before,
spritz-ui[postwrap]:after {
display: none;
}
``