:left

CSS 中的 :left 伪类与 @page at-规则一起使用，用于选择包含多个页面的打印文档中的所有左侧页面。 这对于在双面页面上设置边距非常有用，这样“左侧”的页面具有一个边距，而右侧的页面具有另一个边距，以实现良好的书籍式打印阅读体验。

@page :left { 
  margin: 1in 2in;
}

:left 伪类在 CSS 页面媒体模块级别 3 规范 中定义，该规范目前处于编辑草案阶段。 这意味着 :left 仍处于积极开发中，并且在完全实现为候选推荐之前可能会发生变化。

语法

@page :left { }

根据 MDN，:left 只能设置所有偶数页面的 margin、padding、border 和 background。 但经过测试，在撰写本文时，margin 是唯一似乎具有可见效果的属性。

需要知道

假设我们有一个情况，我们想要在每个偶数页面的左侧添加 1in 的边距。 以下是如何使用 :left 伪类来实现：

@page :left { 
  margin-left: 1in;
}

太好了！ 根据 Chrome 的打印预览，我们获得了所需的边距。

但是，在将页面发送到打印机时，有一些需要注意的细微之处。

边距和书写模式

物理边距仍然添加到文档的左侧，这可能会在使用不同的书写模式（例如，vertical-rl）时，导致元素超出可打印区域。

body {
  writing-mode: vertical-rl;
}

@page :left {
  margin-left: 1in;
}

使用逻辑属性 margin-inline-start 代替 margin-left 可能是更好的方法。

body {
  writing-mode: vertical-rl;
}

@page :left {
  margin-inline-start: 1in;
}

页面顺序取决于页面进度，页面进度又取决于 direction 和 writing-mode

无论页面是双面还是单面，浏览器都会区分“左侧”和“右侧”页面。 但第一页是左侧还是右侧取决于以下因素。 根据规范：

文档第一页是左侧页面还是右侧页面取决于文档的页面进度。 页面进度 是在并排排列时打印文档的页面将按顺序排列的方向。 例如，英语和横向设置的日语通常从左到右进行，而阿拉伯语和纵向设置的日语页面通常从右到左进行。

因此，如果文本是水平设置的，我们可以预期页面在内联方向上流动。 否则，垂直方向将在块方向上流动，这可能会影响页面顺序，最终影响 :left 是否应用于特定页面。 因此，direction 和 writing-mode 属性可能会影响页面顺序。

如果内容超出页面框，则边距不适用

如果页面内容使用边距属性设置在页面框的可打印区域之外，则页面将重置为正常状态。 这实际上是在将内容放置在可打印区域或页面框之外时发生的未知行为之一。 例如，使用上面的代码，假设我们试图通过 margin 属性将所有 偶数页面 上的内容推开，并将 margin-inline-start 设置为 10in，这比标准 8.5″×11″ 纸张小一英寸。

@page :left {
  margin-inline-start: 10in;
}

页面将如下所示

注意页面内容是如何几乎被推到了页面框之外。 现在，看看将 margin-inline-start 设置为 11in 时会发生什么。

@page :left {
  margin-inline-start: 11in;
}

浏览器完全忽略了 margin 属性。 规范没有定义如何在页面框之外定位内容，但这是浏览器处理它的方式。 这也适用于 left-to-right 模式下的页面。

打印机设置仍然很重要

:left 伪类对打印机如何执行其工作没有影响。 例如，:left 不会告诉浏览器在页面上使用双面打印。 这仍然需要在打印机级别完成。

演示

在以下演示中，我们创建了五个元素来进行说明。 我们在每个元素之后强制进行分页，这样在发送到打印机时，我们总共会得到五个页面。

如果没有尝试将页面发送到打印机，很难准确地想象这里发生了什么。 以下是 Chrome 打印预览中前两页的屏幕截图。 注意第一页被认为是“右侧”页面，并具有默认边距，但第二页（偶数页面）包含 :left 应用的样式。

规范

• CSS 页面媒体模块级别 3

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
8	所有	否	6	5.1	10

iOS Safari	Opera Mobile	Android 浏览器	Chrome for Android	Firefox for Android
6	所有	103	所有	否

更多信息

相关