Numbered paragraphs -- Indents and Margins explained
When you create numbered paragraphs (whether a list, a note, or a table/figure caption), you typically use tab stops in your authoring application to specify how the numbers and the paragraph text should be aligned. In the online world, there are no tab stops; browsers don't have rulers because most measurements in HTML are relative.
To reproduce the effect of tabs and indents in HTML, ePublisher automatically converts your numbered paragraphs into tables, and it calculates the dimensions of the table cells based on the tabs and margins of the format in FrameMaker or Word. It usually does this very well. But, if you find that your numbers don't line up the way you expect or that the number and the paragraph text run together, there is something you can do in the Style Designer to correct it.
The problem occurs when you change the formatting of the paragraph style for your online output. If you increase the size of the font, or if you make the text bold, for example, then the original tabs won't effectively contain the now-bigger text. Before you start changing properties of the affected paragraph, you have to understand how we calculate the dimensions of the auto-generated table cells.
First, we create a <div> element, like for any other paragraph. We set the left margin of that div to the intended space between the margin and the number. We then insert a table with two columns--one for the number, and one for the text. The width of the number cell is calculated as the distance from the original left margin of the paragraph to the next tab stop (where the paragraph text usually begins).
So, if you increase the size of the number text, you need to increase the width of that first table cell. To do this, you must explicitly define the left margin and the text indent of the paragraph style in question:
1. In the ePublisher Pro Style Designer, choose the affected style. 2. Set the Text > Text indent value to the desired width of the number, but make it negative (hint: choose the unit first). 3. Set the Margin > Left value equal to the desired width of the number plus the desired left margin of the whole paragraph (often, this will be the location of the aforementioned tab stop). 4. That's it! Regenerate your output to apply the changes.
I always recommend using relative values (i.e., the em unit) to ensure that the number will still fit if the text size is increased in the browser. It's important, though, to use the same units for both margin and text indent. Remember: 72pt = 1in. 96px = 1in. 1em = ~1 font size