Word Processor That Works Like Pen and Paper

Published on by David VanDusen.

Writing on a computer has a ton of advantages over ink on paper: you can undo mistakes, insert new content into existing text, rearrange ideas, copy and paste, correct spelling and grammar…. These features make it easier to create polished documents—to turn a rough draft into a publishable work with few traces of the mistakes and dead-end ideas along the way. But, they make it unsuitable for some purposes, like keeping an authentic journal.

Furthermore, perhaps writing with the constraints of pen and paper helps develop better habits, like thinking through how ideas should be organized and worded before setting them down. (Not to mention practice writing without typos.) And maybe we have become less mindful of how we come across in writing because we’re too accustomed to the ease by which we can reword our thoughts before committing to them.

Last week, I picked up where I had left off several months earlier in Becoming a Technical Leader by Gerald M. Weinberg. I was on chapter 7, “A Tool for Developing Self-Awareness.” Weinberg challenges the reader to, “Starting now, and continuing for three months, spend five minutes each day writing in a personal journal.” He recommends investing in a nice notebook and pen, but using a word processor may be OK in some situations.

If you do decide to use a computer, though, don’t go back and revise previous entries. Later, when you want to review what you’ve written, you’ll wish you had your original impressions. Instead, get a printed copy and paste it in a notebook, preferably hardbound, with dated pages.

From chapter 7 of Becoming a Technical Leader by Gerald M. Weinberg.

Through numerous anecdotes, he makes a case that the value of a journal comes from the honesty and candidness of its contents, which emerge in part from the constraints of the medium.

The book is from 1986, long before our default computing mindset changed to expect everything to be saved to the cloud and all our data accessible from any device. We no longer need to be at a desk in order to use a word processor. How might that affect the advice about journaling using a word processor?

Personally, I don’t know where I’ll be when I get my five minutes to write in my journal. Yes, I could carry a paper journal and pen with me, but I already have a word processor in my pocket. I also don’t know where I’ll be when I want to read my journal. If I’m sitting at my desk, I’ll read it on my PC; in my recliner, on my tablet; on the throne, on my phone.

Following are experiments exploring the idea of modifying a word processor to offer the benefits of the constraints that come from writing with pen on paper. View this page’s source to see the code for the examples.

There are several ways to create a text editor in a web browser. One is the <textarea> element. This has limitations, though, because it can’t contain descendant elements—it’s for plain-text only.

Example of a <textarea> with HTML markup in its value, showing that the markup is interpreted as text rather than HTML tags.

Adding the contenteditable attribute to an element doesn’t suffer from that limitation, so that’s what I’ll be using for my experiments.

The contents of this <div> element with the contenteditable attribute can be edited as well as formatted.
Example of a <div> element with the contenteditable attribute, showing that nested HTML elements are interpreted normally as well as content being editable like a form input.

There are some basic modifications that can be made to an editable element that achieve a few of the constraints of pen and paper writing.

⚠️ These simple hacks don’t work for IME composition, like virtual keyboards on phones and multilingual input methods. To get the intended experience, try these examples with a hardware keyboard with keys mapped directly to characters.

Add to this text to try out the modified input.
Example of an element that only allows content to be added by typing at the end—no pasting, no undo, and no deleting text once it’s been written.

Further modifications can be made to add features that are possible when writing by hand.

In order to add these features, when the user shows an intent to format or delete content, the selected text can be nested in an inline formatting element (such as <del> for deleted text.) CSS can be used to add more markings to formatted text that is nested multiple times.

One problem that arises when trying to format text across lines stems from the browser’s default line breaking behaviour, which is to wrap subsequent lines in <div>s. In order to keep the formatting code simple, "insertLineBreak" and "insertParagraph" input intents can be changed to simply add <br>s instead.

Another problem is with the way DOM Ranges work. When there is a non-text node as the last child with text content in the input, new text will be added into that element. That would be a problem when the last node is a formatting element because there would be no way to break out of it. To address that, a zero width no-break space character can be added after any trailing formatting element. During subsequent text input events, the unnecessary space characters can be removed.

Try writing, marking, and deleting text in this input.
Example of an element that treats deletion and formatting in an ‘additive only’ way. Text can be marked with cmd/ctrl + B/I, and crossed out with delete/backspace.

To turn this demo into a proper journal there are a few more features that may be desired.

An example of these features, including persistence and other improvements, can be seen at journal.figureandsound.com.

There are several other features of ink on paper writing that might be suitable for an application like this. For example:

And, somehow, accessibility to different input methods such as IME composition needs to be figured out. Also, an interface should be added for formatting that doesn’t rely on shortcuts only available to physical keyboard users.

That said, I still want to challenge you to try to write a paragraph or two on journal.figureandsound.com (with a physical keyboard, as noted above) and ask yourself whether these constraints make you think differently about writing. ✍