页面方向

用于 @page at-规则的 page-orientation CSS 描述符控制打印页面的旋转。它在更改页面方向时处理内容跨页面的流动。此行为不同于 size 描述符,因为用户可以定义旋转页面的方向。

此描述符有助于打印文档的布局和方向,尤其是在双面打印文档时。用户可以指定打印时页面的旋转方式。这对于以不同方向布局内容(例如表格,表格可能比其他内容更宽)特别有用。

注意:边距框 和其他位置元素与此描述符没有特殊交互。边距在未旋转的页面中按正常方式布局,然后与其他所有内容一起旋转。

语法

css
/* Displays the print content in an upright position */
@page {
  page-orientation: upright;
}

/* Displays the print content rotated counter-clockwise */
@page {
  page-orientation: rotate-left;
}

/* Displays the print content rotated counter-clockwise */
@page {
  page-orientation: rotate-right;
}

upright

不应用任何方向,页面按正常方式布局和格式化。

rotate-left

页面布局完成后,必须将页面向左旋转四分之一圈(逆时针方向)显示。

rotate-right

页面布局完成后,必须将页面向右旋转四分之一圈(顺时针方向)显示。

正式定义

相关 at-规则@page
初始值upright
计算值如指定

正式语法

page-orientation = 
upright |
rotate-left |
rotate-right

示例

旋转打印页面

此示例显示如何旋转打印文档的内容以适合页面内容和页面位置。

CSS

在此 CSS 代码的第一部分中,命名页面 设置为定义旋转内容的方向。

css
@page upright {
  size: portrait;
  page-orientation: upright;
}

@page left {
  size: landscape;
  page-orientation: rotate-left;
}

@page right {
  size: landscape;
  page-orientation: rotate-right;
}

以下 CSS 代码的第二部分为选择器(例如 <section class="left">…</section>)声明上面定义的命名页面规则。

css
@media print {
  .upright {
    page: upright;
  }
  .left {
    page: left;
  }
  .right {
    page: right;
  }
}

结果

单击打印按钮以查看旋转的页面。

规范

规范
CSS 分页媒体模块级别 3
# page-orientation-prop

浏览器兼容性

BCD 表格仅在浏览器中加载