Positioning an address so it shows through an envelope window

Why this block is harder than it looks

This is the only block in any document whose position is dictated by a physical object rather than by the design. The window is at a fixed offset from the edge of the envelope, the sheet is folded at fixed points, and therefore the address has to sit inside a rectangle measured from the corner of the paper in millimetres. Nothing about it is relative: not to the margin, not to the header, not to what came before it. And the tolerance is real, because the sheet moves inside the envelope, so the block has to sit comfortably inside the window rather than exactly filling it.

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.

• Position it absolutely from the top-left corner of the page in millimetres, and take the offsets from the envelope maker's specification for the envelope you are actually buying.
• Leave a margin of at least 3mm inside the window on every side, because the folded sheet slides. A block that exactly fills the window shows a clipped letter as soon as it shifts.
• Cap the block height and the number of lines. Five lines is the practical limit for most windows, so long addresses have to be condensed rather than allowed to grow.
• Keep everything else out of the window rectangle, including any background tint or rule, or it shows through and the address competes with it.
• Set the type large enough to read through a window at arm's length: 10pt or more, with generous line height, and no light grey.
• Verify against the real envelope and the real printer, folded, once. Everything else about this block is arithmetic, and the arithmetic is only as good as the specification you took it from.

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.

<address class="window-addr">
  <span class="line">Wynne and Hall Ltd</span>
  <span class="line">Unit 4, Callow Works</span>
  <span class="line">Bridge Street</span>
  <span class="line">Sheffield S3 8NP</span>
</address>

<style>
  @page { size: A4; margin: 20mm; }

  .window-addr {
    position: absolute;
    /* measured from the corner of the sheet, not from the margin box */
    left: 20mm;
    top: 45mm;
    width: 85mm;
    height: 25mm;          /* the window is 90 x 30, leaving room to shift */
    overflow: hidden;
    font-style: normal;
    font-size: 10.5pt;
    line-height: 1.4;
  }
  .window-addr .line { display: block; }
</style>

What breaks when it is built the obvious way

Measuring from the margin box instead of from the paper. The margin is a design decision and somebody will change it, at which point every letter in the run misses the window, and the failure is only visible after the envelopes are stuffed.

How to prove it survived pagination

Print one, fold it the way the machine or the person will fold it, and put it in the actual envelope. There is no substitute and it takes a minute. Then shift the sheet as far as it can move inside the envelope and confirm the whole address is still visible at both extremes.

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.