Indentation Explained


The clash between the web and word processor! Two worlds collide when it comes to indentation models used on the web and in word processors. This document is meant provide a bit of rhyme and reason for all those caught in the middle.

Indentation Models

There are basically two models used for determining how far to indent some element. First off, indentation can be described as the visual space between the left most edge of the medium and the beginning of the content.

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:

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:

       |          |
       |          |
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.

When things go wrong...

There are times when the settings don't translate well between the two paradigms. This is why the indentation and margin settings are available in ePublisher, they allow correction of the algorithm used to translate between the two models in addition to customization outside the source document.

The most important thing to remember when working with the indentation and margins is:

If you set one, set the other

This is because you are not just setting a value, but working with the change in paradigm. If the source document has a negative indent that was offset with a positive margin setting the indentation to a value that is less than the inherited value will de-indent the paragraph. This is because the output is displaying a combination of margin and indentation to provide the spacing between the edge of the page and the content.

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

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]


*[ .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:

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

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

HelpCenter/Reference/IndentationExplained (last edited 2008-02-13 06:18:22 by localhost)