Beautifying HTML

You may already know that I'm impressed by AirSet. I'm using it to publish the web site of Willowbrook Arts Camp, a non-profit daycamp on which I am a board member.

Although I am impressed by the service - and I will continue to use it - there are some frustrations. The one I want to discuss in this blog entry is editing the HTML in AirSet pages.

AirSet has a WYSIWYG page editor, and most people will probably never use their HTML editor. If, however, you want to do this, you should be prepared for the fact that carriage returns and line feeds are removed every time you leave HTML edit mode. So every time you enter HTML edit mode, the HTML you see will not be formatted in a way conducive to manual editting.

I had a conversation with their developers, and they understand the issue; but changing it is not high on their list of priorities - which I understand, given that most people won't use it.

But since I do use it, I decided to take some time to find an alternative solution.

One solution, the least technical, is to simply maintain the HTML outside AirSet, using another editor. When you want to make a change, edit the HTML, and then copy it over your AirSet page. While simple, this can become tedious. And if you maintain the HTML on your computer, you can't edit your AirSet pages from another computer without your HTML files getting out of sync.

I looked unsuccessfully for a FireFox plugin that could beautify HTML in text area fields. The Web Developer plugin has a tool for validating HTML, but it can't deal with AirSet's pages when you try to have it "clean up the markup with HTML Tidy".

I also looked at the documentation for HTML Tidy. I thought that it might be able to clean up HTML in the clipboard. And while I found it was discussed, it is not currently capable of doing this.

So I decided to use macro playing software to do the following:

1. Copy the HTML to my clipboard.
2. Create a temporary file for the HTML.
3. Copy the HTML to the temporary file.
4. Run HTML Tidy on the file.
5. Copy the cleaned up HTML back to my clipboard.

Before running this macro, I open the AirSet page for editing and change to HTML mode. When the macro is done, I can then copy the cleaned up HTML back into the AirSet page.

It probably sounds more complex than it is in daily usage, as it's really only 2 extra steps (starting the macro and copying the HTML back into the page).

So, in case you want to do the same thing, here is how I'm doing it.

Note that I'm doing this on a Windows machine. I'm also using AutoHotKey. If you don't have it, install it.

Next, download the AutoHotKey script.

You'll probably have to edit the script, as it stores its temporary file in c:\users\bill\desktop\temp, a folder which probably doesn't exist on your pc.

To start the script, double-click on it. When you start it, it does nothing other than registering the hotkey combination a.

When you are ready to edit the HTML of your AirSet page, open the page for editing and change to HTML mode. Make sure your cursor is in the textarea field. Now press a. When the macro is done, the beautified HTML will be in your clipboard. You can now paste it back to your AirSet page.

2 more notes:

One, you can start the macro when you boot your pc by putting it in your Startup folder.

Two, this macro is good for any HTML - not just that in AirSet. For example, if you are editing an HTML file in Notepad, you can use the same method to beautify it.