How to Use a Two Column Layout

Edit online

Change Layout for Predefined Pages.

First you need to identify which of the pages need to be changed. Pages are already defined for the cover page, table of contents, chapter content, and others. The complete list is here: Default Page Definitions.

Next, add the column-count property to that page. For example:

@page chapter{  
  column-count:2;
}

If you need some of the elements to expand on all the columns, use the column-span:all CSS property. The next snippet makes the chapter titles span both columns:

*[class ~= "topic/topic"][is-chapter] > *[class ~= "topic/title"] {
  column-span:all;
}

Change Layout for a Specific Topic.

If you need to have a different column layout just for one topic, you can use the following technique:

1. Define an outputclass on the topic root element.

   <topic outputclass="two_columns" ...

2. Define a CSS rule that changes the page property for the matching element.

   *[class ~= "two_columns"],
   *[outputclass ~= "two_columns"]{ 
     page: two_column_page !important; 
   }

   Tip: In the selector, use the class attribute for the HTML transformation, or outputclass for the direct transformation, or leave them both if you are not sure.
   Note: The topics from the first level use the chapter page. You must use !important because the built-in rules are more specific and you need to override the page property.
3. Define a page layout.

   @page two_column_page {
     column-count: 2;
   }

Note that the topic will be separated from other sibling topics with different page layouts by page breaks.