DevOps Zone is brought to you in partnership with:

Vladimir is a DZone MVB and is not an employee of DZone and has posted 21 posts at DZone. You can read more from them at their website. View Full User Profile

Writability: Write in Your Browser

  • submit to reddit

Yesterday I found an incredible post on creating a one line browser notepad by Jose Jesus Perez Aguinaga. The idea is using your browser as a minimal, distractions-free text editor.

The great thing is you can work locally even without internet. You don't need additional apps and other fancy stuff just you and the browser. Naturally there are no privacy issues because you work locally inside your browser.

I've started from the basic Jose Perez solution and some comments of other people and I combined that with my knowledge from my previous web typography projects like (Better Web Readability Project - CSS Library,Azbuka - CSS Typographical Base Rendering LibraryClipr - bookmarklet for better reading and the final result is Writability.

Here it is Writability - Minimal Distractions Free Browser Text Writing Tool

Just put this code inside your browser url tab:

data:text/html;charset=utf-8, <title>Writability</title><body OnLoad='document.body.focus();'  contenteditable style="font-size:21px;line-height:1.6;font-family:'Chaparral Pro',Georgia;max-width:21em;margin:0 auto;padding:3rem;background-color:rgb(233,233,225);color:rgb(68,68,68);" spellcheck="false">

You can use additional formatting like bold, italic in some browsers (Example you can use Cmd+B (bold), Cmd+I(italic) on Safari for Mac)

I've tested this solution on Safari, Chrome, Firefox for Mac and Firefox for Windows.

Here is how this solution works on Safari:

Comments or suggestions?

Published at DZone with permission of Vladimir Carrer, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Taruvai Subramaniam replied on Fri, 2013/02/01 - 10:16am

 This is great once it is bookmarked. But if there is no way to save the content.... Is there a way?

Richard Fearn replied on Sun, 2013/02/03 - 8:05am in response to: Taruvai Subramaniam

You can save the content (as an HTML file) by using your browser's standard 'save page as' function.

Taruvai Subramaniam replied on Sun, 2013/02/03 - 7:29pm

 Dear Richard, No you can't. I tried it

Richard Fearn replied on Mon, 2013/02/04 - 4:08am in response to: Taruvai Subramaniam

Which browser are you using?

Taruvai Subramaniam replied on Tue, 2013/02/05 - 2:43pm


Richard Fearn replied on Tue, 2013/02/05 - 3:02pm in response to: Taruvai Subramaniam

Bizarre. Works fine for me (Firefox 18).

David Carboni replied on Wed, 2013/02/06 - 7:04am

As an alternative, I've enjoyed using JDarkroom.  Very distraction-free.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.