Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Readable Bookmarklet

Readable Bookmarklet

Bookmarklet Browser Enhancement Readability

Readable dark theme

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 instead of because serving the resources from a https:// address helps avoid mixed content blocking, thus allowing the bookmarklet to work on more sites.


  • 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"

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","//"+encodeURIComponent(Math.random()));document.getElementsByTagName("body")[0].appendChild(_readableScript)})();

This comment has been minimized.

Copy link

ttodua commented Dec 5, 2019

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


This comment has been minimized.

Copy link
Owner Author

akaleeroy commented Dec 6, 2019

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.