Indentation Explained

The Print Model

The first model for indentation is meant facilitate printing. When you print something you have to contend with using paper. Paper is a finite medium. What this means is that when content ventures over the edge it is lost forever. In order to handle this, the concept of a margin was introduced.

A physical margin can be described as follows:

Margin

The distance between the potential content area and the physical limits of the medium.

Now I could be wrong with this definition of a margin, but for the time being, we'll stick with it.

Within the physical margins lies an area we'll refer to as the content area. This is the area that content can be printed without concern it might be lost. In the content area there are also margins that can be set. These content margins serve as reference points for other measurements such as indentation. Take a looks at the example below:

+------------------------------
|
|  <-- Physical Margin
|
|
|     +---------------------------------
|     |
|     |
|     |     | <-- Content Margin
|     |     |
|     |Head |
|     |     | some paragraphs
|     |     | some paragraphs
|     |     | some paragraphs
|     |     | some paragraphs
|     |     |
|     |     |

The physical margin is usually something that doesn't change too much. Again, content margin is there to provide a reference for measurements such as indentation. In the example you can see a "Head" heading that symbolizes a element that has a "negative" indent. The paragraphs would have an indentation of 0, relative to the content margin.

This is basically how FrameMaker, Word, PostScript, etc. sees content on the page and how it calculates where to place things.

The Web Model

The web model is different from the print model because it has no boundaries. There is no "page" that the browser must write to, which means that there are no hard defined limits. Instead, the browser has the ability to "print" or draw a page on anything and everything. The only thing is it may or may not show up in the browsers view.

The browser's view is very similar to a page. It is the area that is reserved for content in the browser window. This content pane is very similar to the content area described in The Print Model with the biggest difference is there are no content margins. Instead of a content margin, indentation and calculated details are established relatively to the specific object and then applied to the rest of the page.

For example, if I have a div tag that has a padding of 10px and left margin of 30px and the page (body tag) has a margin of 15px, it might look something like this:

+-------------------------
|  |
|  |<- body margin
|  +--------------------------
|  |  [ div margin]
|  | +---------------------------
|  | | +---------------------------
|  | | | Actual content within the div
|  | | |

And be displayed like this:

+-------------------------
|
|
|
|
|
|
|        Actual content within the div
|

You can see that the indentation seen on the actual output is comprised of many complex attributes with each having its own margin and padding details.

Application in ePublisher

So, this all gets translated in ePublisher when the output is processed. What basically is happening is the body tag represents the content area of the page in the Print Model. With this in mind, we only are concerned at where the content margin was in the word processing application. In the word processing application, the content margin essentially sets a "Y" axis on a graph like so:

                  y
       |          |
       |          |
x  ----+----------+--------
     0 |          | 1 inch
       |          |

This 1 inch margin could essentially just get added to each element in the page, but instead we use the blockquote tag and just apply the margin to it. This essentially does the same thing as the div example above. This essentially sets the stage then for each element to continue to use its settings from the original source document.

Indentation of Numbered and Bulleted Items

A special, and more complex case regarding indentation is Numbered and Bulleted items. The indentation not only is important to the bullet as a whole, but to the space between the bullet/number and the content.

Bulleted and Numbered paragraphs are usually adjusted by applying styles to the specific style. For example:

<div class="my_bullet_style">
  <span class="bullet_character">*</span>
  <span class="separator_character"> </span>
  content goes here
</div>

The problem with this configuration is that if the content goes the next line, there is nothing to push the second line to the same indentation as the first line.

The solution is to use a negative indent. This will place the list item in a two celled table and force any wrapped lines to align properly with the first line of the bulleted item.

A negative indent can be accomplished by using the style designer and selecting the bullet/numbered style you wish to fix. The first step is to add a negative indentation value under "Text" -> "indentation". The value should be the size of the space between your bullet/number and the text.:

[bullet character] <-- indent setting --> [content]

Example:

*[ .25 in ]This is my content

The indent setting should be a negative value, so in the above example, the indentation setting would receive a value of "-.25 in". Even though the value you enter is negative, it will be positively applied to the spacing meaning it will create a larger space.

The next step is to set the left margin of the style. Assuming you want the bullet to have a positive indentation from the left margin, you need to pick a value that is greater than the indent value you entered for the text indent. For example, if we want the bullet item to be .5 inches from the left margin and I set the negative text indent to -.25 inches (like in the example), I need to set the margin to .75 inches.

The result of doing this is the following:

<table>
  <tr>
    <td>bullet character</td>
    <td>Content that can wrap and keep its alignment.</td>
  </tr>
</table>

While this process may seem odd, it makes more sense when considering the Print Model and Web Model paradigms.