Reading takes a lot of effort for me. I recently discovered "dyslexia rulers" in the physical world and found them to be very helpful! I wanted a "dyslexia ruler" for the digital world that would be compatible on all browsers.

What it does

It highlights each line of text as you read along. This makes reading easier by helping you keep your place and stay focused.

How I built it

This was my first browser extension. I started by reading and watching Mozilla browser extension tutorials. I then hacked together the browser extension using JavaScript (including the jQuery and SplitType libraries), CSS, and HTML.

Challenges I ran into

Highlighting the line nearest the mouse cursor was surprisingly difficult. It is easy to target individual elements, but not individual lines.

Accomplishments that I'm proud of

I used the SplitType library to split text by line and assign a CSS class to each line so that it would highlight on hover.

What I learned

How to build my first browser extension!

What's next for YouRule!

Compatibility across all major browsers, options to change the highlight color and font properties, and more!

Built With

Share this project: