Limited supportUseful when page-orientation helps structure space, flow, or sizing without relying on brittle manual adjustments.
Layout Limited support

page-orientation

The page-orientation CSS property sets the rotation of a page after pagination. This allows pages with the same size declaration to display with different orientations.

Layout

Overview

The page-orientation CSS property sets the rotation of a page after pagination. This allows pages with the same size declaration to display with different orientations.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.page.page-orientation
85
85
122
85
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
@page landscape-page {
  size: A4;
  page-orientation: rotate-right;
}
.wide-table {
  page: landscape-page;
}

Live demo

Rotate-right (horizontal)

CSS Rotate-right (horizontal) demo.

PreviewFullscreen

Upright (vertical)

CSS Upright (vertical) demo.

PreviewFullscreen

rotate-left

CSS Rotate-left demo.

PreviewFullscreen

Use cases

  • Component layout

    Use page-orientation to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links

Powered by web-features