Skip to content

emjose/eye-onic-reading

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

previous 100 days of code next

Eye-onic Reading


Eye-onic Reading

Table of Contents

#100DaysOfCode

Day 37: August 13, 2022


Bionic Reading example © Bionic Reading GmbH, 2022, Switzerland.



Important Notes:

  • Eye-onic Reading is an independent, educational implementation not affiliated with Bionic Reading in any way.

  • No guarantee of any kind is made with usage of Eye-onic Reading.


Tech Stack and Features

  • Eye-onic Reading was built with HTML, vanilla JavaScript, jQuery, and CSS.

  • Text can be typed or pasted for conversion. Random text examples can also be generated.

  • Converted text can be downloaded as a PDF with the app's usage of jsPDF and html2canvas.

  • The responsive interface is minimalistic and understated to keep the focus on the text.

  • The light and dark mode color palettes were derived from the Bionic Reading website.

  • I enjoy Neubrutalism aesthetics, and Eye-onic Reading has thick borders and drop shadows to enhance accessibility and contrast.

  • Web performance has also been taken into consideration, and Eye-onic Reading is a progressive web app.


Installation

1. Git clone and cd into the repo folder:

git clone git@github.com:emjose/eye-onic-reading.git && cd eye-onic-reading

2. Run the command:

open index.html

Live Site

Live Site

• Text can be entered and converted in real time, with line breaks preserved.

Note: For color and demo purposes, the title's red/orange :hover state was activated for GIF examples.

Click below to expand GIFs

GIF demo: Generating Text

Live Site

• Users can randomly generate short excerpts of text.

• The 10 excerpts are from works of literature, TV, and film.

GIF demo: Editing Text

Live Site

• The top textarea can be edited in real time, and all text can be cleared.

• Although the bottom converted text can be highlighted and copied, the bold formatting will not be copied.

GIF demo: Mode and local storage

Live Site

• Users can toggle between light and dark mode, and mode preference will persist in local storage.

Note: The title's red/orange :hover state has been activated for demo purposes.

GIF demo: PDF download

Live Site

• Converted text can be downloaded as a PDF with bold formatting intact.

• Regardless of light or dark mode, the generated PDF will be black text on a white background.


Issues

Text Issues

  • Th /( |\n)/ regex in the split() method is used to split text at whitespaces and line breaks:
function eyeonicReading(text) {
	const wordArray = text.split(/( |\n)/);
	...
}
  • However, with the current regex in place, indentation is not possible yet with the tab key or multiple spaces.

  • Without the current regex, the first word in a new line will not be converted.

  • The tab key can still be used for keyboard-only navigation.

  • Eye-onic Reading is best used for text-only content.

  • Images will not render, and emojis may convert as �� (replacement characters).


PDF Issues

Eye-onic Reading uses the jsPDF and html2canvas scripts to generate PDFs, but there are limitations.


Click to expand: Squished Text

Shrunken line of text


  • Html2canvas renders a mock "screenshot" of the targeted DOM elements, and representation may not be 100% accurate.

  • A single or few lines of text may appear shrunken or "squished" in the rendered PDF.

  • If text appears extra-condensed, re-pressing the PDF button will re-render the text in a more normal manner.

  • Longer or many lines of text will not have the squished appearance in the PDF.

Click to expand: Page Breaks

PDF page break


  • Text does not break cleanly across multiple pages of a PDF — text is cut off and duplicated.

  • There are current margin issues with jsPDF, but more investigation into this issue is needed.


Improvement

Along with finding solutions for the prior issues, there are several areas of improvement for Eye-onic Reading:

  • Usage of JavaScript modules for storage of generated text excerpts, or use of an API.

  • Refined media queries for landscape orientation, larger screens, and mobile devices.

  • Copy functionality for Markdown and CSS syntax.

  • Custom formatting and settings for fixation, saccades, and font styling.


Resources


Copyright

  • Eye-onic Reading is for made for educational purposes only.

  • Eye-onic Reading is an independent, educational implementation not affiliated with Bionic Reading in any way.

  • No guarantee of any kind is made with usage of Eye-onic Reading.

  • Bionic Reading is patent of, trademark of, and copyright of © Bionic Reading GmbH, 2022. All Rights Reserved.


Let's Connect!

Twitter badge Linkedin badge Medium badge Instagram badge Gmail badge Portfolio badge Github badge

Back to Top