Bleed and crop marks on a document that will be trimmed

Why this block is harder than it looks

A document that will be trimmed is laid out at two sizes at once: the finished size, which is what the design is about, and the oversized sheet it is printed on, which is what the file has to be. Colour that is meant to run to the edge has to extend past the trim line, because the cut is accurate to about half a millimetre and a colour stopping exactly at the trim leaves a white sliver on any sheet that shifted. Getting this wrong is not visible in the file at all: it looks correct on screen and the error appears in the finished, trimmed stack.

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 the page size to the finished size plus the bleed on all four sides, and place the finished-size content inside it. Three millimetres of bleed per edge is the common allowance.
• Extend any element that touches the edge of the design past the trim line by the full bleed, not up to it.
• Keep all text and anything that must not be cut at least three millimetres inside the trim line. That inner boundary is the safe area and it is a separate measurement from the bleed.
• Draw crop marks outside the trim line, offset from it so they are removed by the cut, and keep them thin.
• Do not put crop marks on a document that is not being trimmed. On an office printer they print as stray rules near the corners and confuse everybody.
• Whether the marks are wanted at all is a question for the printer, not a default. Many commercial printers prefer to impose their own and would rather receive a clean page at the bleed 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.

<style>
  /* A5 finished, 148 x 210, plus 3mm bleed on every edge. */
  @page {
    size: 154mm 216mm;
    margin: 0;
  }

  .bleed-art {
    position: absolute;
    inset: 0;                       /* runs to the sheet edge, past the trim */
    background: #1d1812;
  }
  .safe {
    position: absolute;
    /* 3mm bleed plus 3mm safe area, measured from the sheet */
    inset: 6mm;
  }
  .crop {
    position: absolute;
    width: 4mm; height: 0;
    border-top: 0.25pt solid #000;
  }
  .crop.tl { top: 3mm;   left: 0; }      /* outside the trim line, cut away */
  .crop.tr { top: 3mm;   right: 0; }
</style>

<div class="bleed-art"></div>
<div class="safe"> ... content ... </div>
<div class="crop tl"></div><div class="crop tr"></div>

What breaks when it is built the obvious way

Designing at the finished size and adding bleed by scaling the whole page up. Scaling changes every measurement in the document, so the type size, the margins and the line weights are all now a couple of percent off, and nothing looks obviously wrong until it is compared with a correctly produced copy.

How to prove it survived pagination

Open the output and measure the page: it should be the finished size plus twice the bleed in each direction. Then confirm every edge-touching element reaches the sheet edge rather than stopping at the trim, and that no text is within three millimetres of the trim line.

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 gift voucher 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.