NewSprint Speedreader

About:

If you're a blogger or anyone who makes things to read on the web, you have a problem. While there are people with the energy and ability to read long pieces, there are often people stuck using phones with resolutions not well suited to reading, or people who lack the attention span to read something longer than a page. Frankly, I have found myself as both of these people due to my reading habits. So how can you expand your audience to people in these predicaments? I'd suggest using NewSprint on your site. NewSprint has a twofold advantage. The former advantage is that it is better for your eyes by advancing text for you so you don't have to move your eyes and by having a large font that can fill the page, as it only needs to display one word at a time. The latter advantage is that because you no longer have to move your eyes or strain to make out words, you can read much faster than you would otherwise. These advantages can make content more welcoming to smaller screens and shorter attention spans, two demographics which are highly represented. Here are some features of NewSprint:

• links, which are commonplace in most blogs.
• custom output location(passed in the second argument, if you wish to remove the NewSprint popup via dom manipulation)
• custom css(which can be passed into the nsprint function as a link in the third argument)
• adaptable reading, by utilizing the mozilla readability library
• low filesize, the dropin buttons are only 478 bytes, 300 bytes and 273 bytes(in descending order), the main program is only 2.5k(gz), with a 2k stylesheet

You're likely wondering now, how do I implement this? I've prepared some examples with instructions on how to implement them, ranging from simplest to most advanced.

1) Drop-in with auto-adapt:

Here's the simplest solution, the drop-in button. With this, all you need to do is include the following code in your site:

2) Drop-in with custom text:

Here's the (second) simplest solution, the drop-in button, with specified text. This method has higher accuracy than the prior model, and is still accessible to people who only work in html:

3) Drop-in with plaintext:

Here's the third solution, the drop-in button, with plaintext from a variable. This method is perhaps the best, however it is third because it requires basic javascript knowledge, additionally, links are in markdown format:

4) Raw Source:

The final option is just to take a look at the raw source, which is listed on github: