Two column body text that balances and does not strand a heading

Why this block is harder than it looks

Two columns is the right answer for a long document at a small type size, because it fixes the line length, and it introduces three problems at once. Headings land at the foot of a column with their text in the next. The last page balances into two half columns unless told otherwise. And a figure or a table wider than one column has to span both, which means a span rule and a decision about where the spanning element sits relative to the text around it. Each has a one-line answer and none of them is the default.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Set break-after: avoid on every heading, so a heading is never the last thing in a column.
• Set orphans and widows on the paragraphs, because a column break is a line-level break and the same rules that govern page breaks apply.
• Choose column-fill deliberately. Auto fills each column before moving on and leaves the last one short, which is right for a continuous document; balance evens the last page, which is right for a single-page piece.
• Use column-span: all for anything wider than a column, and accept that a spanning element interrupts the flow at that point rather than floating.
• Set the column gap in absolute units, at least 6mm, so the two columns do not read as one at a glance.
• Do not justify unless you also hyphenate, and do not hyphenate in a document containing identifiers. A narrow justified column without hyphenation produces word spaces you could drive through.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<article class="two-col">
  <h2>Method</h2>
  <p>The inspection was carried out from ground level and from the rear
    manhole ...</p>
  <figure class="spanning"><img src="plan.png" alt="Site plan"></figure>
  <p>Access to the rear elevation was arranged separately ...</p>
</article>

<style>
  .two-col {
    columns: 2;
    column-gap: 8mm;              /* absolute, so the columns stay separate */
    column-fill: auto;            /* continuous document: last column short */
    font-size: 9pt;
    line-height: 1.45;
    text-align: left;             /* justify only with hyphenation */
    orphans: 2;
    widows: 2;
  }
  .two-col h2 {
    break-after: avoid;           /* never the last thing in a column */
    margin: 0 0 4pt;
    font-size: 10.5pt;
  }
  .two-col p { margin: 0 0 6pt; }
  .two-col .spanning {
    column-span: all;             /* wider than one column */
    margin: 8pt 0;
  }
  .two-col .spanning img { display: block; width: 100%; height: auto; }
</style>

What breaks when it is built the obvious way

Justifying the text because two columns look like a newspaper. A justified 55mm column without hyphenation has to stretch the word spaces on every line, and at nine point the result has visible rivers running down it. Left aligned in a narrow column is unremarkable and readable.

How to prove it survived pagination

Render four pages and look at the foot of every column for a heading with no text under it. Then look at the last page: it should be short in the second column rather than two even half columns, unless you chose otherwise.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The event programme template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.