I’ve heard it before: “I’m a designer, not a coder.” Yes, and I am not an auto mechanic; but it really helps to know what is going on under the hood to get the best performance from my car. And so it is for designers: In this world of cross platform and multiple electronic devices it really helps to know what is going to happen to your design when it is exported as ePub or HTML. It’s really not that complex, you just need to know a little about HTML and CSS. That is what this blog is all about.

Export a page from InDesign as HTML and you will have a text file that describes the structure of your page. If you did not use InDesign’s Articles panel to indicate the order in which the page elements will be presented, the structure will be from left to right, top to bottom.

HTML is Made Up of Tags

Open the HTML file created in a plain text editor and you will see code that may look a little strange. The top part of the file is information primarily for the browser. The content of your page will begin at a line that starts with the HTML tag .

   <div class="Headline1">
      <h1 class="Headline1">A Capitol Idea</h1>
   </div>
   <div class="Container">
      <p class="Body">Paragraph text here<p>
   </div>

You do not need to be a “nerd head” to understand what this all means. Simply, HTML has several ways of identifying blocks of text.

TAGS

A tag is an identifier surrounded by a pair of angle brackets, such as:

   <div>

Where there is an opening tag such as <div> there must be a closing tag of the same name, only preceded by a slash, as in </div>.

The tag <div> is short for division. It doesn’t imply any grammatical context, it’s just a way to group large chunks of related things. Coming from InDesign you may think of a <div> as being the contents of an unlinked text frame or series of linked text frames.

Other tag pairs include:

  • <body>…</body> – Surrounds all contents for an HTML page.
  • <h1>…</h1> – Six levels of headline tags (h1 thru h6) that translate to styling for headline text including size, color, style, leading, and justification as defined by the browser.
  • <p>…</p> – Defines paragraph text.
  • <span>…</span> – Defines a change of text styling within a paragraph.
  • <ol>…</.ol> – Ordered lists (numbered).
  • <ul>…</ul> – Unordered lists (bulleted).
  • <li>…</li> – A list item nested within either an ordered or unordered list.

The are others, but this list will do for now.

ID

An ID is a named element that is unique within an HTML page. Only one element can be assigned a given id, such as:

<body id="Wednesday"…>…</body>

Notice that the body tag and id are included within a single angle bracket pair. InDesign assigns the name of the document to an ID for the body section of the page.

CLASS

Both text frames and paragraphs can be assigned a class. Because InDesign assigns Basic Paragraph to all paragraphs not otherwise assigned a style, these will be classed as Basic-Paragraph in the HTML. Similarly text frames not otherwise assigned a style are classed as Basic-Text-Frame. Notice that InDesign converts spaces in style names to hyphens.

At this point, all text styling will be left up to the browser to decide what size, color, etc. all the text will be styled in. If, on the other hand, you assign paragraph styles to your text, the text will be given a class name, as in:

<div class="Basic-Text-Frame"
   <p class="Headline1">MY HEADLINE</>
   <p class="Body">Text here.</p>
</div>

Better, yet, when you are defining styles for headlines and other non-body text, take the time to assign HTML Tagging to these styles. The Export Tagging style option is found at the bottom of the options panel for Paragraph and Character Styles.

For example in the example above, if Headline1 is given the h1 tag in the Export Tagging panel, the HTML for the headline entry would read:

<h1 class="Headline1">MY HEADLINE</h1>

With an object style added to the headline container, the HTML will use the object style name for its class.

<div class="Head1">
   <h1 class="Headline1">MY HEADLINE</h1>
   <p class="Body">Text here.</p>
<div>

With tags in place, the browser will read the CSS file linked at the top of the HTML file, and apply the styling defined to the core HTML, classes, and IDs.

CSS

When you export to HTML, InDesign also creates a folder named the same as the document with “-web-resources” appended. Inside this folder will be a folder named “css” and one named “images” if images are included. The css file can be opened in a plain text editor. But, be aware, if you make changes and save, the file name extension must be .css.

Blocks of style attributes, or properties, in the CSS file are each identified by a word or words (the selector). A group of properties is enclosed within a pair of curly braces and each is delimited by a semi-colon at the end. Properties are identified by a css-specific keyword followed by a color and then its value. Because you are familiar with typesetting terminology, css keywords should be easy to discern.

CSS SELECTORS

There are just a few rules to know about selectors (those words that identify a group of styling attributes).

    • They are the same as the HTML tags
    • Core HTML tags (body, p, h1 through h6, div, etc.) are not preceded by any identifying marks.
    • An id selector, if there is one, would be preceded by a hash mark (#):
#TestStyle {
 … }
    • A class selector is preceded by a dot
.myClass {
…}
    • Several core tags and classes can be combined in a single selector:
body, div, h1, h2, h3, h4, h5, h6, p, pre {
   margins:0;
   padding:0;
   border-width:0;
}
    • core HTML tags are most often combined with a class in a single selector:
p.Body {
 …}>

When a core HTML tag is combined with a class to create a selector, the class inherits attributes from the core class which it does not otherwise define. From our examples above, you can see that paragraphs p have margins, padding and border-width set to 0. If the Body style does not overwrite these values, they will remain 0. However, the Body style could overwrite some values, as in:

p.Body{
   margin-left:12px;
   margin-bottom:24px;
}

In this example, margin-right and margin-top would both remain 0.

Here’s the kicker, If any part of a selector doesn’t match up exactly with the HTML, the CSS styling rule will not take effect.

Remember:

  • CSS is very powerful because you can design your CSS selectors to be super specific
  • The more complicated your selectors get, the easier it is to make a mistake.
  • With great power comes great responsibility.

Unless you are experienced, keep to the pattern used by InDesign. It’s not the most efficient (or “cool”) but it works and it is very easy to follow. If you have any questions, set up a dummy file, export it as HTML and pop open both the HTML and CSS files in a plain text editor.

STYLING FRAMES

Here is where InDesign does not give you any help with the CSS, yet. In the HTML, the object style for the text frame will be part of the class that surrounded its contained text:

<div class="Notes">
   <h4 class="NoteText">Note text here</h4>
</div>

In the CSS, you will need to add a selector with properties to identify the styling you want for the text container (for our example, “Notes”).

div.Notes {
   border: 5px solid #000000;
   padding: 14px;
   background-color: #EEE;
}

Border

The settings for border in the example above represent a shorthand method that includes the border width (in pixels) its style and then its color, here represented as a hex value (black). There is a whole raft of color enumeration values, including black, that can be used in place of the hex value. If curious, check out www.w3schools.com/html/html_colorvalues.asp.

You can set the border width for each side of a box in the following order:

   border-top, border-right, border-bottom, border-left.

If you leave one of these out, the boxed element will not have a border on that side.

Border values can be none, hidden, dotted, dashed, solid,double, groove, ridge, inset, outset, and inherit. For more on borders and border values, see http://www.w3schools.com/cssref/pr_border-style.asp.

Padding

Padding is similar to inset spacing for a text frame in InDesign. As with the border property, you can set the padding for all four sides at once as in the example above, or separately:

div.Notes {
   border: 5px solid #000000;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-right: 20px;
   padding-left: 20px;
}

Or, using a shorthand method, write out the values in the order of top, right, bottom, left. For the Notes selector above, this would be written as:

div.Notes {
   padding: 12px 20px 12px 20px;
}

If vertical values (top and bottom) are the same and horizontal values (left and right) are the same, you can use an even more shortened method:

div.Notes {
   padding: 12px 20px;
}

Auto

Should you want to center your layout in a web page, you can do this by setting the left and right margins to auto. Here, again, you have several formats:

    • Using individual values for top, right, bottom, left:
   margin: 10px auto 5 px auto;
    • Using values for vertical and horizontal margins:
   margin: 0 auto;
    • Centered on all four sides:
margin: auto;

On Your Own

The only way you will get a hang of it is to experiment. Set up some simple documents using object styles for text frames. Export as HTML. Open the .html and .css files in a plain text editor and add selectors to the .css file to match the html tags created by InDesign. Add properties to the selectors for adding background color, margins, padding, and borders. Have fun.

Next week we will look at a few advanced layout techniques and some fun css properties you can use to style text and frames that are compatible with today’s modern browsers.