PREPARING DOCUMENTS FOR HTML EXPORT, PART II

In our previous blog we introduced a page layout that presented some issues when it comes to HTML export:

  • Image flush to top and right
  • Side bar with text
  • Pullquote

In looking at the layout for this example, our first impression was to have all text in one text frame and use a left indent for the Body text to allow for the sidebar. Images and the sidebar text in this scenario would be anchored to text and the Pullquote would be created using the new Paragraph Border option. The results produced in the htML export were somewhat satisfactory.

…HTML page created using anchored objects

After a little experimentation, it seemed as if the only way we could get the layout to work the way we wanted in HTML was to rethink our strategy. Instead of having the headline inside the same text frame as the body and Sidebar, we decided to place these in separate text frames. In this version of the layout, no anchors would be needed. Yes, you heard right, no anchors.

So how would this be achieved?

TAKING ADVANTAGE OF BUILT IN FEATURES

Top Right Image

Because an object style is used for the image container, we are able to use a little known feature in the object style’s HTML Export Options Dialog.

…Image Placement Option for Object Style

This feature is also available in the Images tab of the HTML Export dialog, but this setting is global and will affect all images in the document.

…Image Placement Option for Document

Of course, since our layout only had one such element that option could also be used. With the idea that our layout and CSS would be saved for future versions, keeping the setting local (for the object style only) was preferred.

Left to Right, Top to Bottom

The trick for keeping the page elements in the correct order is to take advantage of InDesign’s page item ordering using left-to-right, top-to-bottom placement paradigm.

Prior to exporting the HTML, we physically moved the elements so the top image was furthest left, followed by the Headline frame, then the Sidebar frame, and lastly, theMain text frame. Left to right positioning is no criteria for the HTML structure so as long as the InDesign document is not saved after making the adjustments no harm is done.

Revised layout before HTML export

When exporting the HTML we selected the option to display the resulting HTML export in the system’s default browser.

…HTML page with revised layout

At first glance, the result of the HTML export for the layout looks like we took a giant step backward. But the page elements are in the correct order for the HTML file. That’s what is important.

Modifying the CSS

With the image displayed in the browser, we opened the CSS file using Visual Studio (any code editor or just a good plain text editor would also work). With just a few tweaks to the CSS file, we then refreshed the browser (by clicking the browser’s circular arrow button). Perfect!

..Final HTML export with modified CSS

For those willing to try their hand at CSS, here are the attributes we added to the original CSS flle:

body {
margin:36px;
}
div.Sidebar {
float:left;
}
div.Main {
margin-left:212px;
}
div.Pullquote {
padding-top:10px;
padding-bottom:8px;
}

Save the InDesign document as a template together with the modified CSS file. Now there is a template and a modified CSS file saved to automate the next issue of the newsletter.

USING TEMPLATES AND CSS

You know the advantages of having a template to start a new project. This is especially true if all styling in the template is controlled by styles (including object and table styles as needed in addition to text styles).

When it comes time to export the document to HTML, instead of generating the CSS, click the Add Style Sheet… button in the Advanced tab of the HTML Export Options and navigate to the CSS file you have saved. If all styling is the same, you should have exactly what you want without any further work.

If styling is open to change, you can save those portions of the CSS file that do not change in a separate file. Make sure you set the CSS export for the object and paragraph styles to not Emit. For the HTML export in this instance you would Generate the CSS and add the reserved style sheet to the one being generated.

advanced options tab for HTML export…HTML Export Advanced Options Tab

No, InDesign does not add the reserved CSS file to the generated CSS, but does add its link reference to the head section of the HTML file. It also copies the style sheet you added to the generated css folder along with the generated style sheet. The Browser reads all style sheets referenced in  the HTML and interprets the final display from there.

Emit CSS tells InDesign to no write CSS for the style…Emit CSS option for paragraph style

Caution: Try to have no more than one CSS style selector of the same name in more than one style sheet. This can cause some strange output and, more importantly, can be hard to trace. As a general rule, if some properties have been defined for the same CSS selector in different style files, the value from the last style sheet read will be used.

ONWARD AND UPWARD

Of course, there is always the option to export a document as ePub fixed format or use Publish Online and all would be perfect without the need to pop into a CSS file. But the original idea was to use InDesign to create an HTML page that could be used as a part of a website or web app. And, frankly, having control of the CSS, when easily accessible can be preferable. Try it. After a few stabs at it, you may just appreciate the ease and control this workflow affords. It can have some great advantages.