:right

Avatar of Sunkanmi Fafowora
Sunkanmi Fafowora

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 的免费额度!

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

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

:right 伪类在 CSS 分页媒体模块级别 3 规范 中定义,该规范目前处于编辑草案状态。这意味着 :right 仍在积极开发中,并且在完全实施为候选推荐时可能会发生变化。

语法

@page :right { }

根据 MDN:right 只能设置所有奇数页面的 marginpaddingborderbackground。但在测试后,margin 是唯一在撰写本文时似乎具有可见效果的属性。

须知

假设我们有一个情况,我们希望在每个奇数页面的左侧添加 1in 的边距。以下是使用 :right 伪类进行操作的方法

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

太棒了!根据 Chrome 的打印预览,我们拥有了想要的边距。

但是,在将页面发送到打印机时,有一些需要注意的小细节。

边距和书写模式

物理边距仍然添加到文档的左侧,如果我们碰巧使用的是垂直书写模式,则可能会导致元素超出可打印区域。以下是一个在文档右侧使用负物理边距的示例。

body {
  writing-mode: vertical-rl;
}

@page :right {
  margin-right: -1in;
}
糟糕!将 writing-code: vertical-rl 应用于主体后,元素现在被推出了可打印区域。

使用逻辑属性 margin-inline-end 代替 margin-right 可能是更好的选择

body {
  writing-mode: vertical-lr;
}

@page :right {
  margin-inline-end: -1in;
}
第一页现在在打印文档的“底部”边缘有一个边距。

页码顺序取决于页面排列方式,而页面排列方式取决于 directionwriting-mode

无论页面是双面还是单面,浏览器都会区分“左侧”和“右侧”页面。但第一页是左侧还是右侧取决于它。根据规范:

文档的第一页是左侧页面还是右侧页面取决于文档的页面排列方式。 页面排列方式 是指文档的打印页面在并排放置时的排列顺序。例如,英语和横排日语通常从左到右排列,而阿拉伯语和竖排日语页面通常从右到左排列。

因此,如果文本是横排的,我们可以预期页面在内联方向上流动。否则,垂直方向将在块方向上流动,这可能会影响页面顺序,最终影响 :right 是否应用于特定页面。因此,directionwriting-mode 属性可能会影响页面顺序。

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

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

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

页面的外观将如下所示

是的,还剩下一英寸的空间!

请注意,页面内容距离完全超出页面框只有一英寸。现在,看看将 margin-inline-start 设置为 11in 后会发生什么

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

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

打印机设置仍然很重要

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

演示

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

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

规范

浏览器支持

IEEdgeFirefoxChromeSafariOpera
8全部65.110
iOS SafariOpera MobileAndroid 浏览器Chrome for AndroidFirefox for Android
6全部103全部
来源:caniuse

更多信息