An appendix with its own numbering that starts on a fresh page

Why this block is harder than it looks

An appendix is a document inside a document. It usually wants its own heading numbering, letters rather than digits, its own figure and table numbering, sometimes its own page numbering, and always a fresh page to start on. Each of those is a counter that has to be reset at exactly the right point, and resetting a counter in the wrong place is invisible until the appendix has more than one section. The other half of the problem is that an appendix is often landscape or a different page size, because it holds a wide table that would not fit anywhere else.

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.

• Reset the heading counter at the start of the appendix and switch its style to upper-alpha, so appendices are A, B, C and cannot be confused with body sections.
• Reset the figure and table counters as well, and prefix them with the appendix letter, so Figure A.1 is unambiguous when it is referred to from the body.
• Force break-before: page on each appendix so it starts fresh regardless of what came before.
• Use a named page if the appendix needs a different size or orientation, and apply it to the appendix element rather than trying to change the page mid-flow.
• Keep the running header pointing at the appendix rather than at the last body section, which means the appendix heading has to write to the same named string.
• List appendices in the contents with their letters. An appendix nobody can find from the front is material nobody reads.

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="appendix">
  <h2>Access limitations</h2>
  <figure class="fig"><img src="rear.png" alt="Rear elevation"><figcaption>Rear elevation.</figcaption></figure>
</section>

<style>
  @page landscape-appendix { size: A4 landscape; margin: 18mm; }

  .appendix {
    page: landscape-appendix;       /* only if it needs the extra width */
    break-before: page;
    counter-increment: appendix;
    counter-reset: figure;          /* figures restart inside each appendix */
  }
  body { counter-reset: appendix; }

  .appendix > h2::before {
    content: "Appendix " counter(appendix, upper-alpha) ". ";
  }
  .appendix .fig figcaption::before {
    counter-increment: figure;
    content: "Figure " counter(appendix, upper-alpha) "." counter(figure) ". ";
    font-weight: 700;
  }
</style>

What breaks when it is built the obvious way

Resetting the figure counter on the appendix container but incrementing it on the figure element rather than on the caption. The counter then increments once per figure regardless of where the caption sits, which is usually what you want, but if the reset is placed on a wrapper that appears more than once the numbering restarts mid-appendix and nothing complains.

How to prove it survived pagination

Render two appendices with two figures each. You should see Figure A.1, A.2, B.1, B.2, and the appendix headings should be A and B. Then check the contents page lists both with their letters, and that the running header changed.

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.