Readable Bookmarklet

Readable-Bookmarklet.md

Readable Bookmarklet

Bookmarklet Browser Enhancement Readability

rdbl.us

Readable is an application that helps you read more of the web. It reformats text — on any website — according to your exact specifications.

Readable is originally by Gabriel Coarna, and is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license. Modifications to Readable made by lordastley.

Dark theme by akaleeroy:

• Displays text in Open Sans Light. If it's not installed it falls back to the default sans-serif font on your machine.
• Custom CSS for more comfortable fullscreen reading in the dark.
  Developed for bedtime reading at night with a laser pico-projector.
• Uses rdbl.us instead of readable.tastefulwords.com because serving the resources from a https:// address helps avoid mixed content blocking, thus allowing the bookmarklet to work on more sites.

Usage

• Install the Open Sans font family.
• Create a new bookmark in your browser, name it Readable or however you like
• Paste the contents of readable.min.js below into the URL field (called Location in Firefox)

💡 Pro-Tip: When on an unreadable page there's no need to search for Readable in your bookmarks menus. Just start typing "readable" into Chrome's omnibox, or for Firefox assign it the keyword "readable"

readable.min.js

javascript:(function(){_readableOptions={text_font:"quote(Open Sans Light), quote(Segoe UI Light), quote(Lucida Sans Unicode), quote(Lucida Grande), Arial, Helvetica, sans-serif",text_font_monospace:"quote(Lucida Console), quote(Andale Mono), Monaco, monospace",text_font_header:"Tinos",text_size:"24px",text_line_height:"1.75",box_width:"30em",color_text:"#FDFDFD",color_background:"#000000",color_links:"#99CCFF",text_align:"normal",base:"blueprint",custom_css:"#box,#menu,#rtl_box{background-color:transparent}::-webkit-scrollbar,::-webkit-scrollbar-corner{background:#000!important}#floating{top:1em}#floating a{padding:0;color:#708090!important}#floating_close{font-size:0}#floating_close:before{content:quote(×);font-size:24px;padding-left:.45em;padding-right:.45em;margin-right:.7em;border:2px solid;border-radius:50%}#box_inner #menu a:hover,#floating a:hover{color:#a9a9a9!important}#menu,#rtl_box{border:2px solid #708090;border-radius:32px}#menu a,#rtl_box a{color:#708090;border-bottom:1px solid inherit;vertical-align:sub}#my_news{visibility:hidden}pre{overflow-x:scroll;}@media (max-width:920px){#floating{right: -5px;}#floating a,#floating a:before{margin:0!important}}#text a{word-wrap:break-word}"};if(document.getElementsByTagName("body").length>0);else{return}if(window.$readable){if(window.$readable.bookmarkletTimer){return}}else{window.$readable={}}window.$readable.bookmarkletTimer=true;window.$readable.options=_readableOptions;if(window.$readable.bookmarkletClicked){window.$readable.bookmarkletClicked();return}_readableScript=document.createElement("script");_readableScript.setAttribute("src","//rdbl.us/target.js?rand="+encodeURIComponent(Math.random()));document.getElementsByTagName("body")[0].appendChild(_readableScript)})();

small note: that loads rdbl.us (and other) external "src" scripts. Though they might be good.

@ttodua Yep. It wouldn't fit in just the bookmarklet.

In my experience I could get this to work more often than Pocket, Wallabag or Mercury Web Parser. And with this look I don't feel any less comfortable reading than when using Pocket (cleanest looking option).

Ok, this is awesome. But,, it doesn't wrap the text. It makes it so that I have to scroll side to side, which is what I don't what. Any way to fix this?

@12944qwerty It can be done from the custom_css key in the _readableOptions object. But I haven't looked into it though because it didn't happen often enough for me and because we ought to move to things like Wallabag, turndown, mercury-parser and so on. I now use this bookmarklet only once in a blue moon, to skim selections from ugly news sites.