Tech Tip: Browser as Text Editor

Here’s a quick tech tip I came across yesterday that might come in handy for some people.

If you’re using a modern browser (and why wouldn’t you be?) you can turn it into a text editor by putting what follows into the location bar and then clicking in the window:

data:text/html, <html contenteditable>

Not a big deal, of course: text editors abound, and this is a pretty poor one by comparison. But what it has going for it is convenience. If you’re working on something and don’t want the bother of loading an editor (and, certainly not the bother of loading Word), this might be useful. It can be a tab in your browser, so you can switch back and forth between your notes on the fly and other windows where you’re doing research. This is all the more true for those of you who work with your browsers fully extended, obliterating otherwise useful desktop real estate.

The site I got this from pointed my to another site where it’s been elaborated by the various commenters. Of these extensions, I rather like this one, which kicks up the font size and adds a title to the browser tab:

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style=”font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;” spellcheck=”false”>

I can see using this as an emergency way of creating text during a presentation where you’re using your browser — easy to alter font size. But whether you treat this as simply something useful or merely nifty, bookmark it to have it handy. And let me know by way of comments if it succeeds or fails on your browser, because I’ve only tested it in Chrome on a Mac.

Comments

  1. Thanks for this, Simon.

    If this sort of thing sparks your curiosity (as it did mine), the relevant documents are:

    For the “data” url: RFC 2397

    For the “contenteditable” attribute: HTML5

  2. Thanks Simon. Tested it with IE (does not work). Tested it with Chrome (works). Both done using a PC.

  3. Thanks, Elda. What version of IE was it?

  4. Simon,

    It doesn’t work on IE9 on a Win 7 Pro OS

    David

  5. Simon:

    Thanks for this.

    It works in both Safari (6.0.2) and Firefox (18.0.1) on a MacBook (OS 10.8.2) .

    Cheers!

    Dave

  6. Simon, I tested it on IE8

  7. There’s a nice website for this kind of question.

    For the data URI: http://caniuse.com/datauri

    For the contenteditable attribute:http://caniuse.com/contenteditable

  8. Great find, John. Really useful. Thanks.

  9. Thanks Simon this is a neat trick. Works on Firefox under Linux.
    For those who use Firefox another approach is Quickfox. Quickfox is an Add-on to Firefox that gives us a decent text editor. An Icon for Quickfox appears next to the Home page Icon after installation.

    Cheers

    John Kerr