CSS @page - 頁面方向

CSS 中 **@page** at-rule 的 **page-orientation** 描述符負責控制列印頁面的旋轉，即佈局及其方向。當頁面的旋轉發生變化時，描述符處理內容跨頁面的流動。

**page-orientation** 描述符的行為與 **size** 不同，使用者可以靈活地定義頁面需要旋轉的方向。

**注意**：**page-orientation** 描述符與邊距框和其他位置元素沒有特殊互動。在未旋轉的頁面中，邊距會像往常一樣佈局，然後與頁面上的其他所有內容一起旋轉。

可能的值

CSS 中 **@page** at-rule 的 **page-orientation** 描述符包含以下值之一

**upright**：頁面按正常方式佈局和格式化。不對頁面應用任何方向。
**rotate-left**：頁面在佈局完成後，按逆時針方向旋轉顯示，即向左旋轉四分之一圈。
**rotate-right**：頁面在佈局完成後，按順時針方向旋轉顯示，即向右旋轉四分之一圈。

語法

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

CSS page-orientation - upright 值

以下示例演示了 **@page** at-rule 的 **page-orientation** 描述符的使用，其值設定為 **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（順時針）值

以下示例演示了 **@page** at-rule 的 **page-orientation** 描述符的使用，其值設定為 **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（逆時針）值

以下示例演示了 **@page** at-rule 的 **page-orientation** 描述符的使用，其值設定為 **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>

列印頁面