CSS @left-top At-Rule

CSS @left-top At-Rule

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

@left-top Syntax

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

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

The content property determines what appears in the box. Additional supported CSS properties can control the font, color, alignment, and background.

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

How @left-top Works

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

The @left-top at-rule targets the upper box along the left side of the printed page.

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

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

The generated content can repeat on every printed page where the rule applies without requiring additional HTML elements.

The available space depends on the page dimensions, margin size, and neighboring margin boxes.

Page Margin Position

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

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

The @left-top box is different from @top-left, which appears along the top page margin.

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-top {
    content: "CSS Documentation";
  }
}

The same document label appears in the upper left margin on each applicable printed page.

Displaying Page Numbers

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

The predefined page counter inserts the current printed page number.

Displaying Current and Total Pages

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

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

The page and pages counters are provided by the paged media system and do not require additional HTML elements.

Styling the Margin Box

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

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

This example displays a bold blue label centered horizontally and aligned toward the top of the upper left-side margin box.

Adding a Background

@page {
  margin: 30mm;
  @left-top {
    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 final appearance depends on the margin box dimensions and browser printing capabilities. Background printing settings may also affect the result.

Text Orientation

Text in the @left-top margin box is not automatically rotated. By default, it follows the document's text direction and writing mode.

Long horizontal labels may not fit in a narrow left margin. Use short labels or test supported writing and transformation properties when a vertical layout is needed.

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-top {
    content: "Page " counter(page);
  }
}
@page :right {
  margin: 25mm;
  @right-top {
    content: "Page " counter(page);
  }
}

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

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

The @left-top at-rule does not automatically apply only to left-hand pages. Without the :left page selector, it can apply to every printed page.

@left-top Example

The following example places a page number in the upper left margin of a printed document.

HTML

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

CSS

@page {
  size: A4;
  margin: 30mm;
  @left-top {
    content: "Page " counter(page);
    font-family: Arial, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    color: #0056b3;
    text-align: center;
    vertical-align: top;
  }
}
@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 upper section of the left margin on each printed page.

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

Browser Support

The @left-top margin box has limited availability. Chrome and Edge support it starting with version 131, while Firefox and Safari do not currently support it. See Can I Use? for browser compatibility information.

Specifications

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

CSS Paged Media Module Level 3