Setting Up InDesign Documents for HTML Export

For preparing InDesign content into web-ready form, exporting to HTML may be a preferred solution especially if you don’t mind having to add a line or two to the CSS style sheet created. When you use text, object, and table styles exclusively for styling you can pretty much control how text and images will be exported. Classes in the generated CSS style file are given the same name as the style names. In addition to text and images, cross-references and some hyperlinks are preserved as well as audio and h.264 video files. Even drawn objects such as rectangles, ovals, polygons, and text converted to outlines get exported.

A little understanding of what doesn’t get exported to the HTML and CSS files can help in making some decisions as to how to create the InDesign document. In this discussion we will work exclusively with the HTML export options available for exporting a Document with content order Based on Page Layout.

BASED ON PAGE LAYOUT OPTION

When using the Based on Page Layout export option keep in mind that InDesign determines the HTML order of page elements from their position from left to right and top to bottom. Anchoring images to text assures that images will remain as placed within the text flow when the document is exported.

BULLETS AND NUMBERS

In setting up a paragraph style if Numbers is chosen as the List Type in the Bullets and Numbering options you have two HTML export options you need to be aware of. You may think that selecting Map to Ordered List would be the preferred HTML option as it is the default. This option will add an li tag (list) to the style in the CSS. However no style rule is created for the ol (ordered list). Without this, most browsers automatically add margins to the left of the list items as well as to the top of the first item and to the bottom of the last item.

…browsers add spacing to list items

The second option, Converted to Text, may be closer to what was set for the original document. Notice in the screenshot below, the spacing between the numbers and the text are also preserved.

…List items use spacing as designated in style

In most instances, settings for the paragraph style Space Above and Space Below is honored as margin attributes in the CSS. The exception in the above example is with the space above the title. Surprising was the fact that the export honored the empty paragraph that was used to provide extra space above the graphic at the bottom of the page.

ANCHORED IMAGES

When you export to HTML using Based on Page Layout, the general rule is to anchor images to text. This tells InDesign where to place the image in the HTML. Without that, InDesign will place the image based on the left-to-right, top-to-bottom criteria. Often this puts the image at the bottom of the page. Anchoring an image assures that the image will be in the correct position in the HTML. But there will be no text wrap set, causing the text to jump over the image.

…By default, text jumps anchored elements

When it comes to HTML, adding a float attribute to the CSS rule for the image often becomes a necessity. No matter what you do, just resign yourself to having to add a float to your object’s CSS rule attributes if you want text to wrap.

…Adding float to the anchored element’s CSS 

If an object style is created for the image, adding the code necessary to the CSS becomes a simple matter. Simply open the file in your favorite code editor (or even a plain text editor) and add a float:left to the CSS rule of the same name. While in the CSS file, you might also want to add margin settings. Notice that there is no space between the styling type and its value and a semi-colon at the end.

div.Anchor_Left {
	float:left;
	margin-right:12px;
	margin-top:12px;
	margin-bottom:12px;
	border-style:solid;
}

MORE COMPLEX PAGE LAYOUTS

The next page layout example poses a few problems for HTML export:

  • Image to top right of the page
  • Headline that spans full width
  • Sidebar text
  • Pullquote

…A layout that poses a few HTML problems

Pullquote – New Paragraph Style Border Option

Being able to place a border around text without having to create a separate text box for it, has been something designers have wanted for some time. It’s now available in CC 2018. Our page layout above provides an opportunity to see it in action. For our layout, a paragraph style, Pullquote, was established using the new Paragraph Border option.

…Bordered Paragraph Dialog

This dialog seems quite self-explanatory. That is until you get near the bottom. One would think the settings for Offsets would be inset values for inside the border (what translates to padding values in CSS). Or maybe these are the values for between the border and the surrounding text or graphic elements on the page (what translates to margin values in CSS). Nope. Wrong again. The setting for Offsets apparently are currently being overlooked (maybe we will see these as padding values in future releases). Settings for margins (outside the border) are accomplished in the Indents and Spacing dialog (Space Before and Space After). The width for the Pullquote bordered element can be set for Text or Column width (discretely hidden next to Offsets in the Paragraph Border dialog). The bordered element width can be altered to some degree using Left Indent and Right Indent in the Indents and Spacing dialog.

ONWARD AND UPWARD

To see how we solved the other problems with this layout, tune in next week as we continue to work with InDesign to create HTML pages.