InDesign offers a wealth of text formatting properties, ranging from font family, size and color to tracking, kerning, justification and much more. Many basic formatting properties are exposed directly in the DocMaker API. All other formatting properties can be used in DocMaker by embedding them in styles that are applied to text runs, paragraphs, cells and tables.

The screenshot below shows a basic InDesign document where different styles are used for horizontal alignment, tracking (i.e. uniform spacing between characters) and cell background color:

When using DocMaker to visualize story contents as HTML, CSS classes can be obtained for all styles used in the InDesign document. By default, only formatting properties that are exposed directly in the DocMaker API will be visualized in the CSS.

For instance, below you can see how the font family, size and color properties are automatically visualized while other properties that are embedded in the styles (horizontal alignment, tracking, cell background color) are not:

If you know which styles are used in the document, you can extend the CSS classes in order to visualize additional formatting properties. The following code shows how we write the default CSS classes together with several other style-dependent properties to the HttpContext of our CSS handler:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

public void ProcessRequest(HttpContext context)
{
 context.Response.ContentType = "text/css";
 context.Response.Write(_document.CssClasses);

 ParagraphStyle centered = _document.ParagraphStyles.GetByName("Centered");
 context.Response.Write(
  string.Format(".{0} {{ text-align: center; }}", centered.CssClassName));

 CharacterStyle wideSpaced = _document.CharacterStyles.GetByName("Wide Spaced");
 context.Response.Write(
  string.Format(".{0} {{ letter-spacing: 3em; }}", wideSpaced.CssClassName));

 CellStyle green = _document.CellStyles.GetByName("Green Background");
 context.Response.Write(
  string.Format(".{0} {{ background-color: #7BC143; }}", green.CssClassName));

 CellStyle blue = _document.CellStyles.GetByName("Blue Background");
 context.Response.Write(
  string.Format(".{0} {{ background-color: #009AC8; }}", blue.CssClassName));
}

The additional formatting properties (embedded in the character, paragraph and cell styles) are now also visualized in our rich text editor:

Even as we add more InDesign formatting properties to the DocMaker API, you should keep in mind that you can always extend CSS classes to enhance visualization for InDesign styles depending on your specific requirements.