Writing in the Browser

As a writer, I’ve tried a few different formats. I think it occurred to me, one day, that newer formats won’t work on older systems, and old formats could lose data in the future when programs try converting them to newer formats.

I’ve been writing in plaintext files, which is of course human-readable. The only problem I had is that I can’t italicize or bold, and other formatting options were severely limited.

I tried RTF, but a look at the source made me cringe. It wasn’t even as if they added codes where the formatting was; it was more like every second word was just a slurge of backslashes and random characters. It was not human-readable.

So what’s human-readable and still rich-text? I had the idea to do something with HTML. I created a simple document with a contenteditable attribute set to “true”. I also did a trick to make the style element visible by setting both head and style to display:block.
I was left with a page that I could alter at will, using such built-in short-cuts as bolding and italicization. If you look at the source, there are <b> and <i> elements around certain bits of text in <p> elements, all completely human-readable. I can just save the page back to my drive.

<html contenteditable="true"> <head> <style id="bookStyle"> * {font-size: 30pt;} </style> <style style="display:none;"> head, style, title{ padding:14px; display:block; font-size:14px;} </style> <title>Editable Page</title> </head>
<body> <p>Text here...</p> </body> </html>

I also made an external css sheet specifically for writing books, which I @imported in by throwing it into that editable style tag, and I made some convenience JavaScript which I insert by dynamically creating a script node at the end of my body and inserting it into my head.
I’ll go on about that script some other day, but it basically gives me keyboard shortcuts to insert things like em dashes and horizontal rules, and asks me if I really want to leave if I have unsaved changes.

If I press Ctrl+S, it removes the external script from the document before saving. This way, there’s no whateverpage_files directory taking up space and causing my page to constantly point to an old JS file.

It’s pretty nice! I can easily change the size of the text or the typeface to suit my mood, and there isn’t too much clutter in my actual file. I’ve got my stories in a format that will most likely last longer than any other. It’s kept in an XML format, which means I could very easily make an ePub book out of this when I finish it.
Or I could use some sort of XSL transformation script to output ePub as I’m writing it, if I want to share.

Leave a Reply