FINISHING TOUCHES FOR EPUB – Your Script Doctor

InDesign CS5 and above does a fair job when it comes to exporting a document as HTML. But once you have a template, you may find it just as easy to work with the HTML and CSS. (You will end up having to modify your HTML code anyway, especially if the final product will require a fixed format.)

Using paragraph and character styles exclusively for styling your text and tagging it using Edit All Export Tags goes a long way to getting your project underway. (Edit All Export Tags is accessed from either the Paragraph or Character Styles panel menu.)

For instance, if you have a headline style (named something like “Head1”) you might want to tag it h1 and give it a class named head1. That way, the CSS file will have a class style called h1.head1 with the text styling attributes identified.

h1.head1 {
	-epub-hyphens:none; 
        color:#000000; 
        font-family:"Minion Pro", serif; 
        font-size:24px; 
        font-style:normal; 
        font-variant:normal; 
        font-weight:bold; 
        line-height:1; 
        margin-bottom:0px; 
        margin-left:0px; 
        margin-right:0px; 
        margin-top:0px; 
        text-align:center; 
        text-decoration:none; 
        text-indent:0px;
}

Similarly, if you used a style called “Text” for all of your body text, you might want to tag it p and give it a class named text. Again, the CSS will construct your CSS file with a style similar to the following:

p.text {
	-epub-hyphens:none;
	color:#000000;
	font-family:"Minion Pro", serif;
	font-size:14px;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:1.143;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	text-align:left;
	text-decoration:none;
	text-indent:0px;
}

INITIAL AND DROP CAPS

You can use a character style for both an initial cap and a drop cap. Even if you don’t use a character style, InDesign knows enough to create a span class for you. The advantage in using a character style for an initial cap is that the span class will be named using your character style name, as in:

span.InitCap {
       font-size:24px;
}

For a drop cap, you may decide to use both a drop cap as well as an export tag. Without the export tag, your drop cap will show up in the CSS as an override style:

span.char-style-override-1 {
	font-size:2.758em;
	float:left;
	line-height:1;
	margin-top:-0.075em;
	margin-right:0.05em;
	-adobe-float-keep:column;
	margin-bottom:-0.273em;
}

It can be somewhat confusing, but once you decide how you want your CSS and HTML to be written you can help the HTML export by using text styles exclusively with export tags defined.

Where the HTML export really falls short is in defining boxes (text frames and rectangles). If you assign an object style to your text frames and rectangles, the HTML will assign the name of the object style to the class for the div.

For instance, the export for a text frame with the object style “YellowTextBox”, has the following HTML:

<div class="YellowTextBox">
     <p class="inBox">Text Inside Box</p>
</div>

But there is nothing in the CSS to style the box. So, now you roll your sleeves up and start adding and modifying code. A few examples should get you started.

TEXT INSIDE A BOX

The following example positions text inside a box at an absolute position on the page. The container class is needed to provide a relative positioned parent for the absolute positioned pg10-txt2 class. The style for the paragraph (<p>…</p>) tag defines all default styling.

<div class="container">
   <div class="pg10-txt2">
      <p><span class="dropCap">A</span>bsolutely positioned items base their coordinates from the top and left of the browser window. </p>>
   </div>
</div>

In the CSS, the style for the paragraph tag (<p>…</p>) defines all default styling. This is possible as only one type family is used in our example.

p {
	-epub-hyphens:none;
	color:#000000;
	font-family: serif;
	font-size: 18px;
	line-height: 1.143;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:12px;
	text-align:left;
	text-decoration:none;
	text-indent:0px;
}

To create the drop cap, there is a span style defined:

span.dropCap {
	float: left;
	font-size:3em;
	line-height: 1;
	margin-top:-0.075em;
	margin-right:0.05em;
	margin-bottom:-0.273em;
}

To enable absolute positioning, the parent container for the target div (.pg10-txt2) must have position set to relative. This is done with the container class.

.container {
	position:relative;
	width:768px;
	height:1024px;
}

The class for the text frame (.pg10-txt2) defines its position as well as its width. The height defaults to the height of the text with the padding added. Padding provides a uniform amount of spacing between the text and its containing box. The border attribute contains three values, in order: the width of the stroke, the style of the stroke (solid), and its color (#000).

.pg10-txt2{
        position:absolute; 
        top:300px; 
        left:100px; 
        width:560px; 
        background-color:#9C9; 
        border:5px solid #000; 
        padding:5px; 
}

DROP SHADOW

If you are even more daring, you can define a text frame with rounded corners and maybe even a drop shadow, as in the following:

.pg10-txt3{
        position:absolute; 
        top:470px; 
        left:48px; 
        width:400px; 
        background-color:rgba(204,102,51,0.3); 
        border:2px solid #000; 
        border-radius:25px;
        padding:10px; 
        box-shadow:10px 10px 5px #888888;
}

Yes, and drop shadow on text is also supported on the iPad. The attributes for box-shadow and text-shadow are defined similarly in order: horizontal offset, vertical offset, amount of blur, color. With this in mind, you can define a drop shadow style for text similar to the following:

.dropshadow {
	text-shadow: 2px 2px 5px #666;
}

Adding this class to the style for the text in the HTML, the code will look similar to the following:

<!--defines position for text on page-->
<div class="pg09-txt">
<!--adds dropShadow to styling for h2-->
<h2 class="dropShadow">Just testing drop shadow</h2>
</div>

HTML ENTITIES

And, while you are working with text, look out for quotes and apostrophes. Nothing looks worse than inch marks for quotes and foot marks for apostrophes especially with serif text. Replace the offending characters with the following HTML entities:

left single quote     &lsquo;
right single quote    &rsquo;
left double quote     &ldquo;
right double quote    &rdquo;

Your HTML should be looking pretty good by now. Make sure you test your HTML documents in your browser (Safari or Chrome) to make sure you don’t have some problems you (or your HTML editor) overlooked.

Now that you know coding is not as bad as you thought it would be, spend some time at www.w3schools.com. You may actually find out that being a designer AND a coder can be way cool.