CSS @top-left At-Rule
The @top-left at-rule defines generated content in the top-left margin box of printed pages. It is nested inside @page and is commonly used for document titles, section names, or print headers.
@top-left Syntax
@page {
margin: 20mm;
@top-left {
content: "Design Report";
font-size: 10pt;
}
}The example shows the rule in context. Page-margin at-rules must be nested inside @page.
How @top-left Works
The top-left margin box sits along the top edge of the page, between the top-left corner and top-center regions. It receives its dimensions from the available page margin area. The page must have enough top margin for the generated content.
The @top-left margin box appears in the left portion of the top page margin and is suitable for running headers.
Controlling Header Content
Use the content property to insert text, counters, or other supported generated content. Set font properties within the margin at-rule to control how the header appears.
@page :first {
@top-left {
content: "First page";
}
}Use @page to set the content, and page selectors such as :first to vary it when appropriate. Avoid long strings that compete with other header boxes.
Using Page Selectors
Place the margin at-rule inside @page :first, @page :left, or @page :right to vary the header by page. For example, a first-page header can be different from subsequent pages.
@top-left Example
This print example places a label in the top left margin box. Open the browser print preview to inspect the result; ordinary screen rendering does not display page-margin boxes.
@page {
margin: 20mm;
@top-left {
content: "Design Report";
font-size: 10pt;
}
}Browser Support
Page-margin boxes are supported in current major browsers, but older browsers and print engines may differ. Confirm the printed result using Print Preview. See Can I Use? and search for the relevant feature.
Printed margins and scaling affect the final layout. Verify page breaks and header alignment in PDF output.
Specifications
The @top-left margin at-rule is defined in CSS Paged Media Module Level 3 as one of the page-margin boxes that may appear within an @page rule.