CSS @page - page-orientation

The page-orientation descriptor of @page at-rule in CSS is responsible for controlling the rotation of a printed page, i.e., the layout and its orientation. When the rotation of a page changes, the descriptor handles the flow of the content across pages.

The behavior of page-orientation descriptor differs from that of size, where a user has the flexibility of defining the direction in which a page needs to be rotated.

Note: No special interaction of margin boxes and other positional elements is there with the page-orientation descriptor. In an unrotated page, the margins are laid out as normal and later rotated along with everything else on the page.

Possible Values

The page-orientation descriptor of @page at-rule in CSS contains one of the following values:

  • upright: Page is laid out and formatted as normal. No orientation applied to the page.

  • rotate-left: Page displayed rotated in the counter-clockwise direction, i.e., a quarter turn to the left, after it is laid out.

  • rotate-right: Page displayed rotated in the clockwise direction, i.e., a quarter turn to the right, after it is laid out.

Syntax

page-orientation: upright | rotate-left | rotate-right;

CSS page-orientation - upright Value

Following example demonstrates the use of page-orientation descriptor of @page at-rule, with the value passed as upright.

<html>
<head>
<style>
   /* default for all pages */
   @page {
      margin: 2in;
      page-orientation: upright;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>page-orientation</h1>
   <p>See the orientation of the text on the page.</p>
   <p>I am straight, as it is <b>upright</b>.</p>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS page-orientation - rotate-right (clockwise) Value

Following example demonstrates the use of page-orientation descriptor of @page at-rule, with the value passed as rotate-right.

<html>
<head>
<style>
   /* default for all pages */
   @page {
      margin: 2in;
      page-orientation: rotate-right;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>page-orientation</h1>
   <p>See the orientation of the text on the page.</p>
   <p>I am turned to right, as it is <b>rotate-right</b>.</p>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

CSS page-orientation - rotate-left (counter-clockwise) Value

Following example demonstrates the use of page-orientation descriptor of @page at-rule, with the value passed as rotate-left.

<html>
<head>
<style>
   /* default for all pages */
   @page {
      margin: 2in;
      page-orientation: rotate-left;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>page-orientation</h1>
   <p>See the orientation of the text on the page.</p>
   <p>I am turned to left, as it is <b>rotate-left</b>.</p>
   <button style="background-color: green; color: white; font-size: 1em;">Print</button>
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>
Advertisements