CSS @right-middle At-Rule

The @right-middle at-rule creates content in the middle of the right margin of a printed page. It is nested inside @page and is useful for vertical labels, short notes, or running page information.

@right-middle Syntax

@page {
  margin: 25mm;
  @right-middle {
    content: "Reference";
  }
}

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-middle 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-middle at-rule creates content in the middle of the right margin of a printed page. It is nested inside @page and is useful for vertical labels, short notes, or running page information.

The @right-middle margin box is positioned halfway down the right margin of a printed page. It is useful for vertical section markers or short recurring labels.

Placement and Space

The right-middle box is located halfway down the right side of the page. Reserve enough right margin for its content; a narrow margin may clip or crowd the text.

This rule belongs inside @page; its content is generated by CSS rather than an HTML element. Size and available space depend on the page dimensions and margins.

Styling Margin Content

Margin boxes accept content and applicable styling properties, including text alignment, color, and font properties.

Printed Output

Margin-box content appears in print preview or printed output, not in the normal screen layout.

@right-middle 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-middle {
    content: "Reference";
  }
}

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 text may need a writing-mode or transform depending on the desired orientation. Check print rendering because screen previews cannot show page margin boxes.

Specifications

This feature is described in CSS Paged Media Module Level 3.

CSS Paged Media Module Level 3