Skip to content

Instantly share code, notes, and snippets.

@RyanParsley
Last active August 29, 2015 14:22
Show Gist options
  • Select an option

  • Save RyanParsley/94682bafcc2806a7e370 to your computer and use it in GitHub Desktop.

Select an option

Save RyanParsley/94682bafcc2806a7e370 to your computer and use it in GitHub Desktop.
Current inDesign copy export workflow.

Inside InDesign

The following guidelines will configure InDesign to create nearly usable html via export. Once you export you'll have 1 big html file to manipulate in the next step.

  1. Thread text boxes that contain related content to be exported.
  2. Establish Paragraph Styles for exporting unique block level elements (h1, p, etc)
  3. Establish Character Styles for exporting inline elements (span, strong, em, etc.)
  4. Use lists and tables properly and they themselves out
  5. Inside your Paragraph and Character Styles, set up 'Export Tagging' to map desired elements and classes to export
  6. Create on Article per desired HTML page to be output and set it up with appropriate content
  7. Any images that should be exported in the flow of content needs to be properly anchored
  8. Export html with these settings altered from defaults
  • Content order: Same as Articles Panel
  • Advanced: uncheck both css boxes

Prepare the html generated above with node

Use this node script to break the large file up into usable partials and remove unwanted markup that InDesign insists on creating.

Configuration

  • You'll probably want to change the value of sourceFile to match your exported file name
  • Add 'key: value' to idList per html document that you'd like to split out of the master css (key will be the file name, value is the '#_idContainer' number that InDesign automatically stamps on divs
  • The cruft array contains classes that you'd like to discard (this is needed because InDesign no longer lets you leave the class blank in 'Export Tagging' to produce no class.

Usage

node inDesignToHTML.js

In your static site generator

Set up partials to include your the chunks of html generated in the previous step. For this, I prefer middleman (ruby) or assemble (js).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment