Make your paragraphs more readable
JavaScript HTML CSS
Latest commit fec5807 May 6, 2016 @mds Merge pull request #4 from skip405/master
Readable tweaks

README.md

Readable

readable in action

Readable is a small jQuery plugin to help you make your paragraphs, well, more readable. It injects styling between the 45th and 75th character of every <p> tag on your page.

This gives you a visual reference to tell you if tweaks are needed on your font-size or content width, etc.

Read why the 45-75 rule is important and view the demo here.

Implementation Using jQuery

There are 3 files required to get Readable working on your site. 2 of them are inside the readable folder and the other is jQuery.

  1. readable.css (2 kilobytes)
  2. readable.js (794 bytes)
  3. jQuery ( https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js )

Put readable.css before your closing </head> and jQuery and readable.js just before your closing </body>

<html>
  <head>
    <title>Your Website</title>
    <!-- readable styles -->
    <link rel="stylesheet" href="readable/readable.css">
  </head>
  <body>
    <!-- your website here -->
    <!-- readable scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="readable/readable.js"></script>
  </body>
</html>

Implementation Using Vanilla JavaScript

Only 2 files required to get Readable working on your site. They are inside the readable folder.

  1. readable.css (2 kilobytes)
  2. readable-vanilla.js (1 kilobyte)

Put readable.css before your closing </head> and readable-vanilla.js just before your closing </body>

<html>
  <head>
    <title>Your Website</title>
    <!-- readable styles -->
    <link rel="stylesheet" href="readable/readable.css">
  </head>
  <body>
    <!-- your website here -->
    <!-- readable script -->
    <script type="text/javascript" src="readable/readable-vanilla.js"></script>
  </body>
</html>

Thanks to Jon Suh for the vanilla flavor!

Bookmarklet

I started tinkering with a bookmarklet, but it doesn't work yet. Feel free to fork it and get it working. :)