Lenetek Blog

How to convert a web browser into a text editor

This little known trick is one of my favorites (see section Use a Web Browser as a Notepad). It is so simple and yet so powerful that I hope you too are going to love it.

Presentations are all about making an impression, and surely, your audience will appreciate it.

It works in the most modern web browsers such as Firefox, Chrome, Opera, and Safari. It does not work in Internet Explorer browser, thanks to Microsoft.

This is possible because of HTML5’s contentEditable attribute and the browsers’ ability to handle data URL.

Here is how it works.

Open your web browser (I am using Firefox in the examples below) or a new tab in your browser and type or copy & paste the following string in the URL field:

data:text/html,<html contentEditable>

Hit Enter. Then click anywhere in the browser body. Your browser has just turned into a Notepad. You can now type anything in it:

Instead of typing or copying the above code into the URL filed, I prefer to bookmark it so it is available every time I need to use this feature. In this case, I suggest the following line to be placed in the URL field:

data:text/html,<html contenteditable><title>Notepad</title>

Bookmarking web browser notepad

This default web browser editor doesn't look pretty, does it? However, you can modify it to look better. You can use HTML tags and apply CSS styles to font (style, size, and color), margins, paddings, background and other CSS style attributes. For example, try the following line of code that is a slight variation from my SAS blog post:

data:text/html,<textarea style="width:100%; height:100%; padding:20px; font-size:1.5em; font-family: arial; color:darkblue; border:none; border-left: 10px solid lightblue; margin-left: 30px;" autofocus/>

Now your browser-notepad looks much better:

Applying CSS styles to web browser notepad

This web browser editor is very convenient in presentations when you switch between presenting a website in one tab to another tab where you can type your notes, questions or answers for your audience and anything you like.

To use your web browser as a notepad, however, you don't even have to be connected to the Internet...


Post a comment

Your email is never published nor shared.