Your prescription for increased productivity and profitability
In the last two blogs I demonstrated how you can create your own CSS style sheet and add it to InDesign’s HTML export. The reason for this was to support styling for object styles and for styling attributes such as shadow and radius (rounded corners) that are not currently supported by InDesign. There are other reasons for adding your own CSS style sheets to an HTML export.
Additionally, you might even want to replace the style sheet created by InDesign with one of your own. For that, just uncheck the Generate CSS option in the Advanced panel for HTML Export Options. Then click the Add Style Sheet button to add your own to the Additional CSS option list.
There are a number of reasons why you might want to write your own CSS style file. One might be to make your project more efficient. Remember, the fewer lines of code and pixels a browser needs to process, the faster your pages will load. That’s a good thing. Although the way InDesign writes its CSS works well, it is not the most efficient. Having an efficient CSS file may seem like a small difference, but when it comes to graphic intensive and long documents every bit counts.
One way to make CSS more efficient is to string selectors together into a single CSS rule. If you have a number of styles that share many of the same attributes, you can use one style rule to define most of the attributes for a number of style selectors. For instance, if all of your larger images are the same size, you could use the following to define the attributes for div.CenterImage, div.LeftImage and div.RightImage:
div.CenterImage, div.LeftImage, div.RightImage {
width:312px;
height:196px;
box-shadow: 10px 10px 10px 0 #CCC;
margin:auto;
margin-top:12px;
}
div.LeftImage {
margin-left:36px;
}
div.RightImage {
margin-right:36px;
}
Another trick is to override a CSS rule with another by using a more specific selector. For instance, let’s say you want to make every paragraph in the project black. You might write the css as follows:
p{
color: black;
}But then you decide to make all of the text styled Notes to be styled uppercase and colored blue, so you would add:
p.Notes {
text-transform:uppercase;
color: blue;
}Later you notice that you have a Notes paragraph in the footer section of your document. You do not want this to be blue with a little smaller type size, and not set uppercase.
div.footer p.Notes {
size: .8em;
}For a demonstration document, I kept the use of styles to a minimum: Headline1, Text, First, Caption, and Notes. Then for interest I added a drop cap and a couple of object styles: CenterImage, LeftImage, RightImage, and Footer. The drop cap used a character style named Color.
If we look at the CSS generated by InDesign for this document, you will see a fair amount of duplication. For instance p.Text identifies everything from color to widows. And so does p.Caption, p.First, and p.Headline1. We can simplify this somewhat by pulling out all of the attributes that are the same and place them in the style for paragraph p.
p{
color:black;
font-family:"Minion Pro", serif;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:16px;
line-height:1.125;
margin-top:6px;
margin-bottom:0;
margin-left:0;
margin-right:0;
page-break-after:auto;
page-break-before:auto;
text-decoration:none;
widows:2;
orphans:2;
}With this in place, CSS rules for the other text styles only need to define the attributes that are different. For instance, the style for Text (p.Text) only adds an attribute for text-align.
Of interest are the various ways p.Notes is styled in the CSS: First, it inherits the attributes from paragraph p adding text-align, text-transform, and color.
p.Notes {
text-align:center;
text-transform:uppercase;
color:blue;
}Then within a div classed as div.Footer, the text-transform is removed, color is set to black, and size is set to a percentage of the paragraph p size.
div.Footer p.Notes {
text-transform:none;
size: .8em;
color: black;
}Drop caps in InDesign can be styled with or without a character style within a paragraph style. If a character style is not used, InDesign generates its own drop cap style and represents it in the HTML as follows:
<p class="First"><span class="_idGenDropcap-1">C</span>apitol Reef</p>
Then within the CSS you will find a span style entry that will have the same class selector:
span._idGenDropcap-1
As you can see this generated style could cause problems especially if you use the same style sheet for other documents possibly having more than one “generated” drop cap style. For this reason I suggest that you use a character style for your drop cap characters simply because your HTML file reads better:
Additionally, you can spot the styling for your drop cap in the CSS as the class for its span is named the same as your character style:
span.Color {
float:left;
font-size:2.731em;
line-height:1;
margin-bottom:-0.273em;
margin-right:0.05em;
margin-top:-0.076em;
}You will also want to keep your custom style sheets in a safe location so you can use them, with or without modification as needed.
As you can see, it may take a little effort to put your own custom CSS style sheet together, but your next project may go a lot smoother once you have your own on hand.
Create a simple InDesign document with just a few text and object styles for starters. Export as HTML. Copy the CSS generated into a new file and save it with a descriptive name. Add selectors to the CSS to support your object styles. Make sure you define margins and add supports for special style attributes such as shadows and radius (corners). Modify the selectors generated by InDesign so your style sheet is more efficient. Test your style sheet by exporting your document to HTML. In the HTML Export Options dialog do not check the Generate CSS checkbox in the Advanced panel. Push the Add Style Sheet button and navigate to your custom CSS style sheet. Verify the displayed document to make sure all elements are styled as anticipated.