HTML Tagging

One of the advantages of using a later version of InDesign (5.5 and above) is the support for HTML export. If you have defined your text using paragraph and character styles exclusively, you can determine how you want your HTML text tagged when exported. From either the Paragraph or Character Styles panel menu, select Edit All Export Tags. To have InDesign write the style definitions into the CSS file as part of the export, give your paragraph styles a class name.

For example all paragraph styles can be given the p Tag with a Class name that matches (or is similar to) its paragraph style name. Character styles (such as Bold below) need only have the appropriate tag:

Style     Tag     Class
head1      p       h1
text       p      Text
head2      p       h2
white      p      white
Bold     strong

You will also want to assign object styles to frames that you want to be part of the HTML export. For example, on one of the pages for our example, a semi-transparent frame is used to scale back the intensity of the underlying image. To have this frame show up in the HTML export, it was given an object style named “trans-white-50” to indicate that the text frame needs to have a white background with 50% transparency. This text frame was placed under the text frame containing the text.

Once prepared for HTML export, InDesign’s Export functionality takes over for you. Choose Export from the File menu. In the Export dialog, select HTML from the Format drop down. Make sure the file will save in your project folder and click Save.

You are now presented the HTML Export Options dialog with three tabs. For a fixed format layout you may decide on the following settings:

  • General tab – Select Document for the Export option with Content Order “Based on Page Layout”
  • Image tab – Select Original for the Copy Images option. All other settings will be grayed out.
  • Advanced tab – Select Embedded CSS with Include Style Definitions and Preserve Local Overrides checked

HTML Export

If you open the HTML document created by the export you will discover all of the document is placed linearly in a single page HTML file. This may be what you want for a dynamic ePub, but not for fixed format. What is there is the text export with the appropriate HTML tags. You also have a CSS file with the definitions for the style selectors matching the HTML tags. With a little perseverance and a good fixed format template, you can have your finished document for iPad created in no time.

To finish, use the script “ExportPages_JPEG” to capture the pages of your document as JPEG images. You will then use the information written to a plain text file using the “TextFrameInfo” script, to define the placement for your text frames in the CSS file. In no time you will be proofing your document on your iPad.

The next blog will take you step by step through this process using a template. The template is set up for eight pages plus cover, but you can add as many pages as you want. Meanwhile, start planning your document and create a file for your cover. The cover file will need to be 768px by 1024px, saved as JPEG and named “cover.jpg.”