Readable bookmarklet, customized to look like iA Writer
Since publishing my post last year about how to make any app look like iA Writer, several people have reached out to me via email and Twitter asking for the Readable bookmarklet I mention near the end of the article. Even though I explained there how to get the bookmarklet to mimic iA Writer, these folks were uncomfortable with the steps, or tried and failed to get it to work. In all cases, I ended up just sending them the JavaScript, while noting that that they’d obviously have to own both the Nitti Light font and iA Writer for Mac (for the subtle background image) in order for this to work as intended.
With that in mind, drag [this link](javascript:(function(){javascript%3A(function()%7B_readableOptions%3D%7B'text_font'%3A'quote(Nitti)'%2C'text_font_monospace'%3A'quote(Nitti)'%2C'text_font_header'%3A'quote(Nitti)'%2C'text_size'%3A'24px'%2C'text_line_height'%3A'1.5'%2C'box_width'%3A'35em'%2C'color_text'%3A'rgb(66%2C66%2C66)'%2C'color_background'%3A'%23000000'%2C'color_links'%3A'%23268bd2'%2C'text_align'%3A'normal'%2C'base'%3A'blueprint'%2C'custom_css'%3A'%23box%2C%20%23background%20%7Bbackground%3A%20url(URL_OF_BG_IMAGE)%20repeat%3B%7D'%7D%3Bif(document.getElementsByTagName('body').length%3E0)%3Belse%7Breturn%3B%7Dif(window.%24readable)%7Bif(window.%24readable.bookmarkletTimer)%7Breturn%3B%7D%7Delse%7Bwindow.%24readable%3D%7B%7D%3B%7Dwindow.%24readable.bookmarkletTimer%3Dtrue%3Bwindow.%24readable.options%3D_readableOptions%3Bif(window.%24readable.bookmarkletClicked)%7Bwindow.%24readable.bookmarkletClicked()%3Breturn%3B%7D_readableScript%3Ddocument.createElement('script')%3B_readableScript.setAttribute('src'%2C'http%3A%2F%2Freadable-static.tastefulwords.com%2Ftarget.js%3Frand%3D'%2BencodeURIComponent(Math.random()))%3Bdocument.getElementsByTagName('body')%5B0%5D.appendChild(_readableScript)%3B%7D)()}());) to your bookmarks bar. The font, if it’s installed on your system, should be picked up without issue, and so the only thing you’ll need to specify is the location of the image iA Writer uses for its background. The image can be found here, inside the application package:
.../iA Writer.app/Contents/Resources/English.lproj/backgroundPattern.png
Once you have the image you need to put it somewhere where it can be referenced by CSS, and then replace URL_OF_BG_IMAGE
in the bookmarklet code with the path to the image. Alternatively–and this probably is the easiest method–you can convert the image into a data URI using this simple tool (hat tip Brett), and then replace URL_OF_BG_IMAGE
with the resulting string.