Columns

Lay out elements in columns in the DITA source.

Note: By default, some elements (for example, titles) span across every column. For more information, inspect the template code.

Overview

Resource location:@import url("https://jorsek.github.io/pdfgen.github.io/styles1.1/modules/layout/columns.css");

DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

two_column
To present content in two columns, assign the @outputclass="two_column" attribute to a topic element.

In the following example, the @outputclass="two_column" attribute is assigned to the steps element.

steps two columns
three_column
To present content in three columns, assign the @outputclass="three_column" attribute to a topic element.

In the following example, the @outputclass="three_column" attribute is assigned to the lengthy context element.

concept three columns
four_column
To present content in four columns, assign the @outputclass="four_column" attribute to a topic element.

In the following example, the @outputclass="four_column" attribute is assigned to “Section A” and “Section B”.

section four columns
Tip: For Heretto PDF Generator, when laying out content in multiple columns, consider using the landscape page orientation. For more information, see Orientation Size.

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Add borders between columns
border between columns
/* Add borders between columns */
.two_column,
.three_column,
.four_column {
  column-rule: 2px dashed darkgray;
}
Adjust the gaps between columns
adjust column gaps
/* Adjust the gaps between columns. */
.two_column,
.three_column,
.four_column {
  column-gap: 60px;
}