Marks on the page / Letterhead
A letterhead on the first page only, with the rest indented under it
The organisation's name, mark and address at the head of a document, usually on the first page only, with the body starting below it.
Why this block is harder than it looks
A letterhead is first-page-only content in a document whose page rule is written once, so the first page needs a bigger top margin than every other page and the content has to know about it. Doing that by pushing the first block down with a margin works and then breaks the moment the content is short enough that the letterhead and the body both fit differently than expected. There is also a pre-printed stationery case, where the letterhead is already on the paper and the document must reserve the space and print nothing into it, which is the same layout problem with the ink removed.
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.
- Give the first page its own page rule with a larger top margin, using the first page pseudo-class, rather than pushing the content down with a margin on the first element.
- Put the letterhead itself in the first page's top margin box if it is purely decorative, or in the flow if it contains text that should be selectable and searchable.
- For pre-printed stationery, reserve the space and print nothing. That is a page rule with a large top margin on the first page and no content in the box.
- Keep the mark as SVG. A letterhead logo is the most reproduced graphic in the document and a bitmap version of it is visible at print resolution.
- Do not repeat the letterhead on continuation pages. A short line with the organisation name and the folio is the convention, and repeating the full head makes every page look like page one.
- Measure the reserved height from the real stationery if there is any, with a ruler, once. Everything else about this block follows from that number.
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.
<header class="letterhead">
<img class="mark" src="mark.svg" alt="Wynne and Hall" width="180" height="48">
<p class="addr">Unit 4, Callow Works, Bridge Street, Sheffield S3 8NP</p>
</header>
<style>
@page { size: A4; margin: 22mm 20mm 26mm; }
@page :first { margin-top: 45mm; } /* room for the head, first page only */
.letterhead {
position: absolute;
top: 18mm; /* inside the first page's larger margin */
left: 20mm;
right: 20mm;
}
.letterhead .mark { display: block; width: 46mm; height: auto; }
.letterhead .addr {
margin: 4pt 0 0;
font-size: 8pt;
letter-spacing: 0.03em;
color: #555;
}
</style>What breaks when it is built the obvious way
Pushing the body down with a top margin on the first paragraph. Margins collapse, get overridden by the next component someone adds, and apply to the element rather than to the page, so the day the first block is a table instead of a paragraph the letterhead is sitting on top of it.
How to prove it survived pagination
Render a one-page document and a four-page document. The head should be on page one of both, page two should have the smaller top margin, and no body content should be inside the reserved area on page one. On pre-printed stationery, print page one on the real paper and look.
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
Will this fragment work on its own?
Not as a whole document. It has no page rule, no margins and no base type, because those belong to the document rather than to the block, and duplicating them in every fragment would mean thirty copies to keep in step. Paste it into a template that already has them.
Why does it look right in a browser and wrong in the PDF?
Because a browser window is one continuous surface and a document is a stack of fixed rectangles. Nothing in a scrolling view exercises a page boundary, so every break rule in the fragment is inert until the content is paginated. Render the real thing with enough content to cross two or three boundaries, then look.
Do I need a special option on the render request for this?
No. Everything on this page is CSS and markup, which is your side of the boundary. What the render has to give you is a real page size with real margins, and after that the layout is decided by the stylesheet.
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.
A border or frame around every page of a certificate or diploma
A decorative rule or ornamental frame drawn around the whole page, used on certificates, awards and formal documents.
Leaving space for a physical stamp or seal on a printed document
A reserved clear area where a rubber stamp, an embossed seal or a wet signature will be applied after printing.
Bleed and crop marks on a document that will be trimmed
Extra artwork beyond the finished page edge and the short rules that show a trimmer where to cut, needed for anything printed oversize and cut down.
A totals block that never splits across a page break
Subtotal, tax and grand total, sitting immediately below the thing most likely to overflow and therefore constantly at risk of being cut in half by a page break.
Business letter, as a complete file
The whole document with this block already in place, ready to copy and change.
@page :first, :left, :right in paged output
The property carrying the weight here, with its real support status.
Every part of a document
The full list, grouped by the kind of problem the block poses.
Paste the fragment into the playground inside a page rule and see what it does at a real page size. That is the only way any of this gets confirmed.