Skip to content

Instantly share code, notes, and snippets.

@akaleeroy
Last active August 30, 2023 08:11
Show Gist options
  • Save akaleeroy/855be4a4a690ff9dafa05234f2f35928 to your computer and use it in GitHub Desktop.
Save akaleeroy/855be4a4a690ff9dafa05234f2f35928 to your computer and use it in GitHub Desktop.
Readable Bookmarklet

Readable Bookmarklet

Bookmarklet Browser Enhancement Readability

Readable dark theme

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"

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)})();
@akaleeroy
Copy link
Author

akaleeroy commented Mar 8, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment