To use the CSS style sheet you need to make sure your export provides the necessary information to accommodate styling requirements. (For more information on using custom CSS style sheets, refer to our blogs for October 1 and 7.) 

Page Setup

Of course you are using paragraph and character styles exclusively for styling your text. Using styles allows the export to add a class to the HTML tag for your paragraphs and a span class to styling within the paragraph.

<p class="Body">Paragraph is styled with style <span class="Bold">Body</span>.</p>

The same applies to text frames and image containers that are styled with object styles. The object style name becomes the name for the class of a div.

<div class="ObjectStyleName">

If there is a style selector having the same name in a CSS style file applied to the export, the property attributes defined in a selector of the same name will be applied to all objects with that object style.

One place where providing styling is necessary is for multiple column text frames as shown in the example above.

Multicolumn Text Frames

The CSS codes having to do with columns are not supported uniformly by all browsers. To accommodate the differences CSS styles for column attributes require media query statements. Media queries provide the specific code required for those browsers who would not otherwise support a CSS style. The following CSS examples provide styling for Mozilla-based browsers such as Firefox (-moz), and -webkit based browsers such as Safari and Chrome (-webkit) as well as a default value which may or may not be recognized by all other browsers. If a browser does not recognize a style property, it simply ignores it.

Column Style Examples

In the following examples you would substitute the object style name in the place of classSelector.

The column-count property specifies the number of columns for an element:

div.classSelector {
   -moz-column-count:3;
   -webkit-column-count:3;
   column-count:3;
}

The column-gap property specifies the gap (gutter) between the columns:

div.classSelector {
   -moz-column-gap:40px;
   -webkit-column-gap:40px;
   column-gap:40px;
}

The column-width property specifies the width of the columns:

div.classSelector {
   column-width:100px;
   -moz-column-width:100px;
   -webkit-column-width:100px;
}

If column width is not specified, the width of the container is divided equally between the columns with the gap specified between.

CSS3 also provides properties for designating rules between columns including stroke width, style, and color. This would be in the form of the following generalized example.

divSelector {
   column-rule-width column-rule-style column-rule-color;
}

Custom CSS Style File

To apply the styling to the HTML elements created by the export, you need to tell InDesign’s export to use a custom .css style file. This is done in the Export Options Advanced panel. Below the field labeled Additional CSS: click the Add Style Sheet button and navigate to your custom .css style sheet.

As an example, the style sheet that I use for the sample document above has the following style properties to style a frame with the “ThreeColTextFrame” object style applied.

.ThreeColTextFrame {
   -webkit-column-count: 3;
   -webkit-column-gap: 12px;
   -webkit-column-width: auto;
   -moz-column-count: 3;
   -moz-column-gap: 12px;
   -moz-column-width: auto;
   column-count: 3;
   column-gap: 12px;
   column-width: auto;
   margin-top:12pt;
}

This style sheet also provides for margins and floats to style the rest of the page.

Floats

Whenever you want two elements to display side-by-side, you need to provide a float property for the element’s style.

If, for example, the three column text frame in the above sample page were created as three separate text frames, all three frames would require a float-left property. The second and third frames would also require a margin-left property to place a gap (gutter) to the left of the frame. For this, provide two different object styles, one indicating float left and the other indicating float left with margin. For the sample, I provided the styles “floatFrameLeft” and “floatFrameLeftMargin”. The style selectors in the CSS file I used were as follows:

.floatFrameLeft, .floatFrameLeftMargin{
   float: left;
   width: 32%;
   height: auto;
   display: inline;
}
.floatFrameLeftMargin {
   margin-Left: 2%;
}

Notice, instead of repeating all of the properties for “.floatFrameLeftMargin”, I applied all of the properties common to both styles in a single selector. Only the margin-left property was then needed for the “.floatFrameLeftMargin” style.

The sidebar text was given the object style “Sidebar” while the image was given the object style “floatImageLeft”. For this the custom CSS style file contained the following:

div.Sidebar {
   float: left;
   width:40%;
   margin-top:20px;
   display:inline;
}
.floatImageLeft {
   float: left;
   width: 60%
   height:auto;
   display:inline;
}

Because there is a paragraph style also named “Sidebar,” using div as part of the selector differentiates between the two. Also, notice the combined value for the two selector widths is 100%. If you were to exceed this width value, the browser will ignore the float. Also, if less than 100%, elements following could end up sneaking into the space left over. Percentage values are used to accommodate a difference in the width of various browser viewports.

To style the banner headline (“Banner” object style) and the headline above the three column text (“Head1”) the style sheet includes:

div.Banner {
   margin-top:30px;
   margin-right:15%;
}
div.Head1 {
   float:none;
   margin-top:40px;
   display: inline;
}

Images for Export

When it comes to exporting for HTML or ePub I have found it best to provide the image in the original document at the size and resolution required by the exported page. If the image is small, you can leave the resolution at 300dpi. On the other hand, I prefer to use Edit Original or Edit With to resample the image down to 150%. Then in the Image panel for Export Options the following can be used:

HTML Export

• For Copy Images, set the option to Original.

ePub Export

• Uncheck Preserve Appearance from Layout
• Set the Resolution to the resolution of the document image
• Choose Fixed for the Image Size
• All other image settings may be ignored.

Export Options Settings

In the General panel, select Same as Articles Panel if your layout is anything but top to bottom, left to right. And, of course, you will have the Articles panel set up in your document so you can use this option.

If you check View HTML or ePub After Exporting don’t panic when you see the display is not what you expected. Use this option only to make sure you have included all of the elements in the right order, and maybe spot a misspelled word you might have missed. Other than this, I suggest exporting first to HTML even if your final will be for ePub. Check the HTML display in a webkit based browser or with an application such as Dreamweaver. Once you get the HTML to display correctly, make sure you use the modified CSS Style sheet for your final ePub export. Now test on the devices or browsers that your document is targeted for. You may even have the need to display your document on devices having different screen sizes. If so, you have taken the first step toward designing for liquid or responsive display because the horizontal measurements in your CSS file are all set to percentages. That is a subject for another blog.

Customizing Your Custom CSS File

Unless all of your documents have the exact same layout, you will need to set the margin and width values in your custom CSS file before export. You may do well by just guessing the values you will need. But a script can be written that will give you all the values you need.

Ahah…another reason for a script…