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.

CSS Selectors

Groups of element properties are identifed by selectors. These “select” the HTML elements to which the styles will be applied. Commonly there are three types of selectors: HTML element, class, and ID selectors. Element selectors are the same as their tag. Class selectors are preceeded by a dot, and ID selectors with a hash (#) character. CSS3 also introduces several new selectors that allow elements to be selected based on attribute values, input state, and an element’s position within the DOM. The .Notes and .CenterImage class selectors are preceeded by a div. indicating that only those classes nested within a div will be selected.

Shadow

The text-shadow property allows you to create varying amounts of shadow behind text. The property accepts the following values and format:

text-shadow: horizontal-offset vertical-offset blur color;

The horizontal-offset and vertical-offset values dictate the position of the shadow in pixels. In our CSS above, this property is added to all paragraphs assigned the Shadowed paragraph style.

The box-shadow property allows shadows to be created on block-level elements. This can be handy when the design calls for drop shadows requiring varying sizes. Similar to text-shadow, it has the following format:

box-shadow: horizontal-offset vertical-offset blur spread color inset;

Inset determines if the shadow should be on the inside of the element. If no value is provided the shadow is on the outside.

If negative values are provided for shadow offset values, the shadow will be rendered to the left and top of the object. This works the same with text-shadow.

Border Radius

Prior to CSS3, rounded corners were simulated using several images or a JavaScript. The new border-radius property allows rounded corners to be generated without any help from images or JavaScript. It requires only one parameter, its value:

border-radius: 10px;

You can also specify a different radius for each corner of the element as in the following:

.box {
   border: 1px solid #000000;
   border-top-left-radius: 5px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 0;
}

On Your Own

Start with a simple document created in InDesign and export to HTML. Take a look at the HTML and CSS files created. If using InDesign CC, check the settings for your object styles’ Export Options. Next, try creating a custom CSS style sheet of your own to add margins and some of the new CSS properties enumerated above to some of the HTML elements. Experiment and have fun.