How does the export filter work?

In order for an InDesign file to be properly exported all text should be formatted using paragraph or character styles. Only then it is possible to translate all formatting into CSS that is used for formatting HTML. 

There is a helper script "AutoCreate_ParagraphStyles.jsx" that allows you to automatically convert all custom text formatting or character styles into paragraph styles in InDesign. However, if you want to be in control of what shows up in CSS styles in your HTML template you will have do that your self.

Exporting InDesign into pdfChip templates

The InDesign export filter is started by double clicking it in the Scripts palette in InDesign. It creates a new folder next to the InDesign file with the name: <InDesign file name>"_htmlOut". If there is already a folder with this name an error message is displayed before it is overwritten. The new folder has the index.html template and further content in subfolders that it references:

  • fonts
  • images
  • js
  • styles

A few files are always created by the export filter: The index.html template itself and a corresponding CSS file: styles/style.css. The js folder contains the Hypenator JavaScript library that is by default used for all exported text to make sure that it is hyphenated.

Basically all text and vector elements will go into the index.html and the style.css has all formatting: text sizes, positioning, colors, images, fonts etc. etc. This will, however, for text only work if it`s formatting uses InDesign paragraph stylesheets and not "custom formatting". See "Auto convert custom formatting or character styles into paragraph styles" how you can do that.

The fonts folder has all fonts that have been used in the InDesign file. Currently TrueType and OpenType fonts are supported, since only those work safely in pdfChip. If other font formats are used in the InDesign file an message shows up during export. For each font a @font-face entry is created in styles/style.css.

The images folder has copies of all images that are referenced from the InDesign file. The images in this folder are now referenced from styles/style.css. This works for properly for jpg, png or other formats that are supported in HTML. If an image e.g. uses TIFF the HTML will have a broken link (and the PDF created from it will be empty).

Multi page files

The HTML template will consist of a single HTML "page" even if you have several pages in your InDesign file. But this single page will have all content of all InDesign pages. The CSS page size definitions will make sure that when pdfChip converts this template into a PDF file that you will have as many PDF pages as your original InDesign file had.

Auto convert text using custom formatting or character styles into paragraph styles

In order to properly convert text formatting all such formatting should take place using either paragraph or character styles in InDesign. The helper script "AutoCreate_ParagraphStyles" creates a generic paragraph style for each text that is not already assigned to such a style. The generic paragraph styles gets the name "AutoStyle"<No>, where <No> is a number.

If there already is a paragraph style with the name, an error message appears. This will e.g. usually be the case when you would run the script twice on the same InDesign file. If you need to do that because you have inserted new text, you will have to rename as many existing paragraph styles beginning with AutoStyle as you need for the new text.

Hyphenation

If you are using text boxes in InDesign all text will automatically be hyphenated. Only if you have disabled hyphenation in the respective Paragraph Style in InDesign this will not be the case in the result HTML and PDF.

The language settings from InDesign Paragraph Styles are also taken over, so if you are marking a paragraph as English and another as German, these settings will be taken over into the HTML template. This does, however, not work for language settings in Character Styles.

In order to achieve that the InDesign Export automatically inserts and activates a JavaScript library "Hyphenator" into each HTML template that it creates.

Further information about this great library that has been written by Mathias Nater, Zürich (mathiasnater at gmail dot com) is available via this link: https://github.com/mnater/Hyphenator.

Hyphenation results may differ from the results of InDesign since both engines are using different dictionaries and rules.