Columns

If you need to spread content in multiple columns, use the two CSS properties: column-count and column-gap.

Suppose that you have an HTML section that will be shown in a two-column layout, and as a special constraint, you want the title to span on both columns.

<section class='two-columns'>
    <h2>The section on two columns</h2>
    <p> The section content... </p>
</section>

You can define a page with two columns:

@page two-columns-page {
    column-count: 2;
    column-gap: 1in;
}

Then associate the section element with this page:

section.two-columns {
    page: two-columns-page;
}

To make the title span the entire page width, use the column-span property:

section.two-columns h2 {
    column-span: all;
}

Limitation:

You cannot use multiple column configurations on the same page. Oxygen PDF Chemistry only takes the column-count and column-gap properties into account if they are set on @page rules, not on elements from the content.

To control exactly the column breaking algorithm you can use the following extension properties: -oxy-column-break-inside-oxy-column-break-before-oxy-column-break-after.

For example, to eliminate the possibility where a heading <h3> element remains at the end of a column and the text that follows it moves to the next (a column break just after the heading) you can use:

section.two-columns h3 {
    -oxy-column-break-after: avoid;
}