InDesign to SimpleHTML – Easily Repurpose Content with Uncluttered Markup

Justin | design,extensions,InDesign,publishing,software | Monday, May 15th, 2017

Simple HTML From InDesign header image

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.

in5 (InDesign to HTML5) logoSince 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.

InDesign HTML vs. SimpleHTML side-by-side comparision

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.

Using SimpleHTML

Once installed, you can access SimpleHTML from File > Export SimpleHTML…

SimpleHTML user interface

The time-saving options include:
  • 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

Sign up for my newsletter and I’ll send you SimpleHTML for free.
Get my copy of SimpleHTML

Join the newsletter and get SimpleHTML

Simplehtml_icon_full

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.

Powered by ConvertKit

Related Articles

6 thoughts on “InDesign to SimpleHTML – Easily Repurpose Content with Uncluttered Markup”

  1. Glen Saville says:

    Looks damned good, anything that will make life easier is top notch to me! Cheers Guys! Glen

  2. Frans van der Geest says:

    Fails for me with longer projects, the generated index.html is empty. For example is a document with one long primary text frame, anchored images that is set up for an reflowable ePub (Split at certain paragraph styles etc.).
    Small articles work fine.

    1. Justin says:

      Hi Frans,
      I hadn’t thought about this for longer projects, but would be happy to take a look at the file if you want to send it to me:
      https://ajarproductions.com/pages/contact.php

      1. Glen Saville says:

        Same issue for me! As a test I tried to export a typesetting job I’m doing at the moment a 286pp book, locked up for about 5 hours and produced an empty HTML file 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *