One landscape page inside an otherwise portrait document

Why this block is harder than it looks

Changing orientation mid-document is a named-page problem, and the part people get wrong is that a page rule is not something you can switch on and off in the flow: it is attached to an element through the page property, and everything about that page including its margins and margin boxes comes from the named rule rather than being inherited. The second question is which way to turn it. A landscape page in a bound document should read with the head to the left, so the reader turns the document clockwise, and getting that backwards means every reader turns the wrong way once.

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.

• Define a named page with size: A4 landscape and apply it to the element, rather than trying to change orientation with a transform.
• Repeat the margin box content in the landscape rule. Nothing is inherited from the unnamed page, so a folio you defined once is absent here unless you define it again.
• Force a break before and after, so the landscape leaf is exactly one page and the portrait flow resumes cleanly.
• Turn the content so the head is at the left edge of the portrait sheet, which is the binding convention, and check it against a printed and bound copy rather than reasoning about it.
• Keep the folio in the same physical corner of the sheet as on the portrait pages if the document is bound, so a reader flicking through sees the numbers in one place.
• Do not use it for a table that could have been made to fit. A single turned page costs the reader more than a slightly smaller type size.

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.

<section class="wide-table">
  <h2>Schedule of defects</h2>
  <table> ... a genuinely wide table ... </table>
</section>

<style>
  @page { size: A4; margin: 22mm 20mm 26mm;
          @bottom-right { content: counter(page); font-size: 8pt; } }

  @page wide {
    size: A4 landscape;
    margin: 20mm 22mm;
    /* nothing is inherited: the folio has to be declared again */
    @bottom-right { content: counter(page); font-size: 8pt; }
  }

  .wide-table {
    page: wide;
    break-before: page;
    break-after: page;      /* exactly one leaf, then portrait resumes */
  }
</style>

What breaks when it is built the obvious way

Rotating the content with a transform instead of using a landscape page. The page stays portrait, so the text block is still the portrait width and the rotated content overflows it, and selecting or extracting the text gives you a rotated mess rather than a table.

How to prove it survived pagination

Render, print double sided, and bind or staple the result. Turning the document to read the landscape page should be one natural movement in the same direction every time. Then confirm the folio is present on the landscape page and in the expected corner of the sheet.

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 multi-page report 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.