Special CSS Styling

I am not lazy (really). I just don’t like spending my time doing things I don’t need to do. To start, when I create documents I use presets and stylesheets almost exclusively. I then use a script to create the document, choosing the document preset and style sheet from its dialog. To populate my document I have a collection of scripts that allow me to place images and text files without having to folder dive for resources. The script also allows the me to assign object styles to the items as part of their placement.

I could write my own HTML from scratch, but since I have InDesign, I often let it do the job for me. InDesign (CS5.5 and above) does a great job exporting to HTML, converting special characters to entities in the process (a chore I absolutely dislike when hand coding). But, depending on the version of InDesign, its support for CSS often is not adequate. For instance, in CS6 support for object styles is limited to adding HTML tags to elements. In CC, you can assign properties to the object style to control alignment, spacing, and even floats for text runaround. Let’s see how this all goes together.

Demonstration Document

For demonstration I created a document having web intent. I used object styles exclusively for image and text containers. The properties for the text container object styles identify its Paragraph Styles.

Object Styles

New for InDesign CC are three export options which can be established for object styles.

• Alt Text – for identifying the source for alternate text
• Tagged PDF – for identifing tag and text source
• EPub and HTML
  • Custom Rasterization – for setting image rasterization, size, and more
  • Custom Layout – based on either alignment and spacing or float

In earlier versions of InDesign there is no option for Custom Layout. For these options, you either set these values globally as part of the HTML export, or to objects  individually using the Object Export Options menu item.

HTML Export

For my first export, I selected Export from InDesign’s File menu. In the Export dialog I selected HTML from the format dropdown and clicked Save.

In the HTML Export Options dialog, I selected Document for Export. Because I had not created an Article for the document export, my only choice for Content Order was Based on Page Layout. For this project I decided to set the values for image rasterization globally using the Image panel in the HTML Export Options dialog. Settings in the object style override these settings. The result of this export is shown in the screen capture on the left below.

I then returned to the document and used the Articles panel to establish page item order for the export. This time when I exported I selected Same as Articles Panel for Content Order. In the resulting web page elements were in the right order but there were no page margins or styling for the Notes text frame.

Special Styling

I often wonder why setting margin values was left out in the HTML Export Options dialog for InDesign CC. (This option is available for versions CS5 and CS6). Perhaps it was to avoid possible conflicts with settings when creating responsive web designs.

To add margin values and special styling I created my own custom CSS file. This I added in the HTML Export Options’ Advanced panel (click Add Style Sheet button and browse to the file).

The file describes properties for the HTML’s body tag, text and object styles (classes):

@charset "UTF-8";
/*CSS document declaration*/
Shadowed {
   text-shadow: 10px 10px 10px #CCC;
}
div.Notes {
   margin:12px auto 12px auto;
   border: 2px solid #0CC;
   background: rgba(0,204,255,.3);
   padding: 6px 12px 6px 12px;
   border-radius:10px;
}
body {
   margin-top:30px;
   margin-left:40px;
   margin-right:40px;
   margin-bottom:30px;
}
div.CenterImage {
   width:313px;
   height:197px;
   box-shadow: 10px 10px 10px 0 #CCC;
}

With this CSS file added, the exported file looks like the screen shot on the right below. You will need to look closely to see the shadowing on the headline and large centered image.