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>

打印页面