CSS @left-middle At-Rule

CSS @left-middle At-Rule

The @left-middle at-rule defines content and styling for the middle section of the left margin on a printed page. It is a CSS page-margin at-rule nested inside @page and can display page numbers, document labels, and other generated content alongside printed material.

@left-middle Syntax

@page {
  @left-middle {
    content: "Text";
  }
}

The @left-middle at-rule must appear inside an @page block. Its declarations control the generated content and appearance of the middle left-side page-margin box.

The content property specifies what appears in the margin box. Other supported properties can control its font, color, alignment, and background.

The rule applies to paged media, such as printed documents and print previews, rather than the normal browser window.

How @left-middle Works

When a browser prepares a document for printing, it divides the content into pages. Each page has a content area surrounded by margins that can contain generated content.

The @left-middle at-rule targets the center box along the left side of the page.

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

This example reserves a 25mm margin around the printed content and places "CSS Reference" in the middle of the left page margin.

The content can repeat on every printed page where the rule applies, without adding extra HTML elements.

The available space is determined by the page dimensions, margin size, and neighboring margin boxes.

Page Margin Position

The @left-middle margin box occupies the middle section of the left page margin, between the upper and lower left-side margin boxes.

These boxes are positioned by the paged media layout system rather than ordinary CSS positioning.

The @left-middle box is different from @bottom-left, which appears along the bottom edge of the printed page.

Generated Content

The content property can display fixed text, page numbers, and other supported generated content in the margin box.

Displaying Fixed Text

@page {
  margin: 25mm;
  @left-middle {
    content: "CSS Documentation";
  }
}

The same label appears in the middle of the left margin on each applicable printed page.

Displaying Page Numbers

@page {
  margin: 25mm;
  @left-middle {
    content: "Page " counter(page);
  }
}

The predefined page counter inserts the current printed page number.

Displaying Current and Total Pages

@page {
  margin: 25mm;
  @left-middle {
    content: counter(page) " of " counter(pages);
  }
}

In supporting browsers, this displays the current page number and total number of pages, such as "3 of 8".

The page and pages counters are provided by the paged media system and do not require counter declarations in the HTML document.

Styling the Margin Box

The @left-middle margin box supports several CSS properties for controlling the appearance of its generated content.

@page {
  margin: 30mm;
  @left-middle {
    content: "CSS Reference";
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #0056b3;
    text-align: center;
  }
}

This example displays a bold blue label centered in the middle left-side margin box.

Adding a Background

@page {
  margin: 30mm;
  @left-middle {
    content: "REFERENCE";
    font-size: 10pt;
    color: #fff;
    background-color: #0056b3;
    padding: 6pt;
  }
}

This adds a blue background and white text to the generated margin content.

The appearance depends on the margin box dimensions and the browser's printing capabilities. Background printing settings may also affect the result.

Text Orientation

The left-side margin box does not automatically rotate its text. Horizontal text is the normal starting point, and the available margin width may limit how much text fits.

For a vertical label, a supporting paged media implementation may allow text orientation or transformation techniques, but these should be tested in the intended print environment.

Left and Right Pages

The :left and :right page pseudo-classes can apply different margin content to left-hand and right-hand pages.

@page :left {
  margin: 25mm;
  @left-middle {
    content: "Page " counter(page);
  }
}
@page :right {
  margin: 25mm;
  @right-middle {
    content: "Page " counter(page);
  }
}

On left-hand pages, the page number appears in the middle of the left margin. On right-hand pages, it appears in the middle of the right margin.

This arrangement can be useful for double-sided printed documents, where page numbers are positioned near the outer edges.

The @left-middle at-rule itself does not mean "left-hand pages only". Without the :left page selector, it can apply to every page.

@left-middle Example

The following example adds a document label and page number to the middle of the left margin in a printed document.

HTML

<article>
  <h1>CSS Paged Media Example</h1>
  <p>This document demonstrates the @left-middle margin box.</p>
  <p>Open Print Preview to view the generated margin content.</p>
</article>

CSS

@page {
  size: A4;
  margin: 30mm;
  @left-middle {
    content: "Page " counter(page);
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #0056b3;
    text-align: center;
  }
}
@media print {
  body {
    font-family: Arial, sans-serif;
    color: #222;
  }
}

Open the document in a browser that supports CSS page-margin boxes and select Print Preview. The page number appears in the middle of the left margin of each printed page.

The generated content does not appear in the normal browser viewport.

Browser Support

The @left-middle margin box has limited availability. It is supported in Chrome and Edge starting with version 131, but is not supported in Firefox or Safari. See Can I Use? for detailed browser compatibility information.

Specifications

The @left-middle at-rule is defined in CSS Paged Media Module Level 3. It is one of the page-margin at-rules used to place generated content around the main area of printed pages.

CSS Paged Media Module Level 3