KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #dsh #dsh-plugin #ai-agent #claude-code #codex #typescript #ai-agents #mcp #cli #rust #deepseek-harness

readable

★ 296 Open GitHub ↗

Make your paragraphs more readable

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Readable

![readable in action](https://s3.amazonaws.com/f.cl.ly/items/081k1i0l1G1s090b2t2W/readable.gif)

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](https://readable.now.sh/).

## 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
<html>
  <head>
    <title>Your Website</title>
    
    <link rel="stylesheet" href="readable/readable.css">
  </head>
  <body>
    
    
    <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
<html>
  <head>
    <title>Your Website</title>
    
    <link rel="stylesheet" href="readable/readable.css">
  </head>
  <body>
    
    
    <script type="text/javascript" src="readable/readable-vanilla.js"></script>
  </body>
</html>
```

Thanks to [Jon Suh](http://github.com/jonsuh) 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. :)

readable

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README