TIP 169: Converting InDesign Text Styles to CSS

When you drag text stories from the Package window into a Go-Live Web page, the character, paragraph, and nested styles can be converted to a close approximation using CSS. This is a significant timesaver that helps ensure visual consistency between print and Web publications without requiring any extra effort. Be aware that certain InDesign typography featuressuch as baseline shift, ligatures, tracking, kerning, hyphenation, and optical margin alignmentcannot be retained in a Web page because equivalent features don't exist in CSS.

Customizing the Package CSS

The ability to automatically use one external CSS file for all the content from an InDesign Package is a significant timesaver, but the fonts definitions in the CSS are likely to refer to fonts from print design that may not be common Web design fonts. To address this issue, choose Package CSS... > Edit... from the package menu, and adjust the font definitions as necessary.

First, select the story in the Package window and look at the Inspector palette (Figure 169). To translate InDesign text styles to CSS styles, make sure the Use CSS Styles option is enabled. Then in the CSS Style Definition pull-down, choose from None, Internal CSS, and External CSS. (You probably don't want to use None because that means none of the styles will be defined for you.) You can use Internal CSS, but that writes the CSS definitions into every page, which is usually redundant and makes the pages harder to update. We recommend choosing External CSS and using the default .css file from the InDesign Package. Now when you place InDesign stories in your GoLive Web pages, the external .css file in the accessories folder (see Tip 167) can be the default style sheet for all the Package content, and GoLive will automatically link to the .css file.

Figure 169. Retain the text style options so that text from InDesign Packages uses an external style sheet.