A company registration footer that repeats on every page

Why this block is harder than it looks

This block is required, it is required on every page, and it is required to be legible, and those three requirements conflict with the fact that nobody wants to spend vertical space on it. The usual outcome is a single line of 6pt grey text jammed against the bottom margin, which satisfies the letter of nothing. The layout question is how to fit a two-line statement into a page footer without either shrinking it past legibility or eating the text block.

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.

• Put it in the page's bottom margin box rather than in the flow, so it repeats without the content having to know about it and without consuming text-block height.
• Reserve the space in the page margin rather than overlaying it. A footer that overlaps the last line of body text on long pages is the failure this causes.
• Keep it at 7pt or above and in a colour that is genuinely readable rather than a light grey chosen to make it disappear.
• Allow it two lines and set the line height tight, rather than forcing one long line that has to be shrunk to fit the measure.
• Separate the registration details from the page number: they are different information and putting them in the same margin box makes both harder to find.
• Do not centre a long statement. Centred small text at the foot of a page is read less than left-aligned small text, and the left edge gives the eye somewhere to start.

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.

<style>
  @page {
    size: A4;
    margin: 22mm 20mm 26mm;        /* bottom margin sized for the notice */

    @bottom-left {
      content: "Wynne and Hall Ltd, registered in England and Wales "
               "no. 04182266. Registered office: Unit 4, Callow Works, "
               "Bridge Street, Sheffield S3 8NP.";
      font-size: 7pt;
      line-height: 1.25;
      color: #666;
      text-align: left;
      width: 130mm;                /* wraps to two lines rather than shrinking */
      vertical-align: bottom;
    }

    @bottom-right {
      content: counter(page) " of " counter(pages);
      font-size: 7.5pt;
      color: #666;
      vertical-align: bottom;
    }
  }
</style>

What breaks when it is built the obvious way

Setting the notice as a fixed-position block instead of a page margin box. Fixed blocks sit on top of the content rather than beside it, so on any page whose text reaches the bottom margin the notice prints over the last line, and it does so only on the pages that are full.

How to prove it survived pagination

Render a document long enough to have one page filled to the bottom margin and confirm nothing overlaps. Then read the notice at actual size at arm's length: if you cannot, it does not matter that it is present.

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 business letter 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.