Editor’s note: Here’s another post from Mark Vilrokx (@mvilrokx), detailing some hacking he did to help his daughter, who has Dyslexia, read web pages.
This is an awesome idea, and I love hacking for good. I’m not alone, e.g. Marco Arment has added OpenDyslexic to Instapaper. We need more of this. Anyway, read on for Mark’s story and find the comments here or on his original post.
Note: WordPress strips out JavaScript by default, so if you want Mark’s bookmarklet, head over to his original post and drag the bookmarklet link to your Bookmarks bar to install it.
My wife and I recently found out that our 9 year old daughter has Dyslexia so lately I have done some research on solutions that could make her life easier. That is how I stumbled upon OpenDyslexic, “a new open sourced font created to increase readability for readers with dyslexia”. There is some science behind all this, which I will spare you the details of but when I showed it to my daughter, she said it was much easier to read for her, so I decided that all websites should use this font! Since it’s too much work to call all web designers and demand that the make the web more readable with this font, I came up with something more practical. I created a bookmarklet to apply the font, and a few other style changes that improve readability, to any website. It injects some CSS into the current webpage which then gets applied to the current web page, giving me exactly what I need. The CSS looks like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @font-face { | |
| font-family: 'opendyslexic'; | |
| src: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Regular.otf'); | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| @font-face { | |
| font-family: 'opendyslexic'; | |
| src: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Italic.ttf'); | |
| font-style: italic; | |
| font-weight: normal; | |
| } | |
| @font-face { | |
| font-family: 'opendyslexic'; | |
| src: url('http://dyslexicfonts.com/fonts/OpenDyslexic-Bold.ttf'); | |
| font-weight: bold; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'opendyslexic'; | |
| src: url('http://dyslexicfonts.com/fonts/OpenDyslexic-BoldItalic.ttf'); | |
| font-weight: bold; | |
| font-style: italic; | |
| } | |
| @font-face { | |
| font-family: eulexia; | |
| src: url('http://dyslexicfonts.com/fonts/eulexia.ttf'); | |
| } | |
| * { | |
| font-size:20px; | |
| line-height:200%; | |
| color: #191A42; | |
| font-family:opendyslexic !important; | |
| } |
Pretty simple, it loads the Web Font from the defined URL into the browser (@font-face) and we then apply this to ALL elements on the page (font-family:opendyslexic !important;). Obviously this screws up some of the layout, so the bookmarklet is best applied on blog style websites or websites with lots of text, but it will work on any website. So go ahead, drag the bookmarklet to your bookmarks and apply it to your favorite website and let me know what you think.
Hi – this looks brilliant – thanks for the info. Would you mind explaining how I could go about setting up a bookmarklet please, as I know some people with dyslexia and I’d love to recommend this to them, but I’d need to give them some detailed instructions about how to set it up. I’m happy to write them myself, but I’m just not sure how to go from your post, to converting a web page to use the dyslexia font.
Any advice much appreciated.
Thanks!
Maybe Mark can share his source on GitHub? I’ll ask him.
Hi Jim – it seems that something went wrong when Jake re-posted my orignal post and so the actual bookmarklet is missing from this blog. If you go to the orignal post on my blog (http://allthingsrails.com/post/40586127585/making-the-web-more-readable-for-people-with-dyslexia), you (and anybody else) can just drag and drop the word “bookmarklet” from the blog text to their bookmarks, that is all you have to do. Then, whenever you visit a webpage and want to apply the OpenDyslexic font to that webpage, just click on the bookmarklet. This screencast demonstrates the process: http://www.youtube.com/watch?v=xAdRyUV9Xv8
Hope this helps.
Hi Jake, maybe you can add the bookmarklet itself to the blog post here, it is missing.
Sorry, didn’t notice that. WP strips out JS. Will send people to your post for the bookmarklet.
Thanks very much for your help Mark 🙂