CSS @right-top At-Rule
The @right-top at-rule defines a page margin box near the top of the right edge of printed pages. It must be nested within @page.
@right-top Syntax
@page {
margin: 25mm;
@right-top {
content: "Section A";
}
}The example demonstrates the syntax and the relationship between the rule and its surrounding CSS. Check the details below before using it in a production document.
How @right-top Works
This rule is part of the CSS paged-media model. It is evaluated when the browser formats content for printing or PDF output.
The @right-top at-rule defines a page margin box near the top of the right edge of printed pages. It must be nested within @page.
The @right-top margin box sits near the top of the right page margin. It is intended for printed-page annotations and running labels.
Page Margin Position
The right-top box occupies the upper part of the right page margin. It is distinct from @top-right, which occupies the top margin.
Declare it within @page and use content to generate the label. A named page or :first page selector can change the label on selected pages.
Page-Specific Content
Combine the margin box with @page :first, :left, or :right to vary the content by page.
Space for Content
Use a sufficiently wide right margin to accommodate the box.
@right-top Example
This example illustrates the rule in context. Open Print Preview to see the margin-box content.
HTML
<h1>Print Example</h1>
<p>Open your browser print preview to inspect the page margins.</p>CSS
@page {
margin: 25mm;
@right-top {
content: "Section A";
}
}Browser Support
Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature. Print margin boxes also depend on print and PDF behavior.
The margin box is not part of the document DOM. Ensure the page margin is wide enough and inspect a printed or PDF result.
Specifications
This feature is described in CSS Paged Media Module Level 3.