Web Development tip: use TextEdit to export valid XHTML

Great timing. A few month ago I was hired by some folks to help with a form that would create a Vcard from the web. From there it has evolved into a regular web maintenance and content update gig. Early on in the process I suggested that we move the code over to valid xhtml and possibly refresh the design in the process. Well this past week I've been updating the code to valid xhtml and wouldn't you know it just as I was preparing to convert a large and messy table I came across this hint at MacOSX Hints which details using TextEdit for converting text to valid html or xhtml. I code most of my sites by hand using Smultron so this caught my eyes as a great potential time saver and particularly helpful for converting this table.

From the hint:

...if you work in a native Cocoa application like TextEdit using only the tools Apple provides for word processing (which admittedly take some getting used to, and handle only basic formatting needs -- much like basic HTML itself), you can easily work in a WYSIWYG mode and then convert the file to clean HTML that you won't be embarrassed to call your own.

Until yesterday, I thought TextEdit's HTML conversion ability was on a par with that of Word and Pages. That's probably because in its default mode, it is. However, unlike those apps, the surprisingly powerful TextEdit provides some very handy, simple options to produce clean HTML when you need that. Here's a brief set of steps to take advantage of this capability:

1. Copy and paste your Cocoa-formatted text into a new TextEdit document. (Hint: TextEdit provides an Application Service (New Window Containing Selection) in the Services menu for this once you select the text in the originating app.)

2. Open TextEdit's Preferences and select the Open and Save tab.

3. Change Document Type to either HTML 4.01 Strict or XHTML 1.0 Strict, depending on whether you want your code to be XHTML compliant or not.

4. Change Styling to No CSS. Note that this will strip all font and style information from the file, except for the basics like bold and italics.

5. From the TextEdit menubar, select File/Save As.

6. In the Save As dialog box, give your file a name and hard disk location. Then, change the File Format selection to HTML, and click Save.

7. Now, when you click on your new HTML file in the Finder, it will open with your default web browser. If you examine the source code, you'll see nothing but simple, pure HTML (or XHTML).

I set TextEdit's prefs to export with no css and copied the table in question directly from the page and pasted it into a new TextEdit document and sure enough after export to html I had a lean and mean valid table with all of the garbage stripped out. Wowza! Saved me oodles of time and I have a hunch it will be a handy trick I'll use again for other quick edits.

Technorati Tags: Apple, OS X, TextEdit, Web Development