SimpleHTML is a new tool for InDesign that exports bare naked HTML from a Text Frame or Story.
There’s no <head> or <body> tag, no classes, no <div> wrappers, no clutter—just the HTML that you need to paste into a blog post (or email) editor.
The Back Story
David Blatner and I were prepping for our Importing and Exporting HTML5 session at this year’s Creative Pro Week conference and discussing all the myriad ways that InDesign and HTML could possibly interact.
I knew from David’s session at PePcon last year that the team at InDesign Secrets has found it painstaking to repurpose articles from their magazine to their WordPress blog.
David told me that they export HTML from InDesign using InDesign’s built in export, but that they then have to open the file in a text editor and run several find and replace commands to clean up the code before pasting it into the WordPress post editor.
According to InDesign Secrets Editor-in-Chief, Mike Rankin, this manual cut-and-paste method takes at least 30 min per article! And he has about 600-800 articles from back issues waiting to be converted.
David and I agreed that it would be useful to have a tool that exported uncluttered HTML from InDesign that would not require clean up—and that it would be fun if we could show such a tool in our session.
Since I had already written a much more complex InDesign to HTML tool, in5—which also retains layout, animation, and interactivity from InDesign—I figured that I could borrow some code from in5 and build such a tool.
…And here it is!
SimpleHTML in Action
Here’s an image comparing the cleanest HTML that InDesign can output on the left (no CSS, selected text frame only) and SimpleHTML on the right.
The SimpleHTML is half as many lines and far more readable.
SimpleHTML exports no layout. It will only export the content of a Text Frame or Story (and any images, tables, and hyperlinks that are anchored inside).
It even removes the header (html/head/body) tags, so you can just copy/paste the whole thing into a WordPress story.
If you’re looking for a way to share a complex, interactive layout inside of a WordPress blog post, check out the in5 Embed Plugin for WordPress.
Once installed, you can access SimpleHTML from File > Export SimpleHTML…
- Export entire story – if the text frame is linked to others, this option will output the entire story as HTML.
- Auto-detect HTML tag names – will look for styles named similar to head1 (or h1 or heading_1) and make it a <h1> in the output, even if no export tags are set up in the Paragraph Style. Also looks for bolded and italicized text and tags it appropriately.
- Use <strong> and <em> instead of <b> and <i> – when checked, uses the modern semantic tags, otherwise uses the old tags.
- Insert placeholders for images – puts [-INSERT images/image-name.png HERE-] instead of <img src=”images/image-name.png”/>
to make inserting images in a WYSIWYG editor easier. In WordPress, you can drag-and-drop your images right into the placeholder locations.
…And once the export is done, there’s a convenient Copy to Clipboard button—so you don’t even have to open the exported file to get your code!
Start using SimpleHTML
Get my copy of SimpleHTML
Join the newsletter and get SimpleHTML
Sign up now and I'll send you the SimpleHTML installer.
As a subscriber, I also send you tips, tricks, and tools related to InDesign and HTML.