PDF中的左手页、右手页和故意留白页

▲ 搜索“大龙谈智能内容”关注公众号▲ 

“真正的数字化不应该只是在数字世界复制现实世界，而是使用数字方式重新设计世间事物运行的方式。”

Solidworks & PTC Onshape创始人 -  Jon Hirschtick

虽然我们早已经进入了电子世界，但是在很长一段时间我们需要在电子世界里模拟纸质世界。。。

- 1 -

纸质世界的机制

纸是中国人发明的，在有电脑之前人们都是在纸张上记录信息，形成了书。 

基于纸张的特点，人们在书中设计了一套方法来表达和查找信息（正反页都输出内容）：

• 给每一页一个编号，叫做页码。通过页码人们可以定位信息。在目录和索引中，通过指定页码让人们方便地找到内容

• 第一页和奇数页从右侧开始，也叫右手页，见图1和图2

• 第二页和偶数页放在左侧，也叫左手页，见图3。右手页和左手页分别是纸张的正面和反面，是对称的。示例中页眉和页脚的文字靠外侧。

• 因为每一章都希望从奇数页开始，上一章如果在右手页结束，那么它的下一页将没有内容，就会是空白，叫故意留白页，见图4

图1 - 左手页和右手页

图2  - 奇数页（右手页）

图3 - 偶数页（左手页）

图4 - 故意留白页

虽然现在有电脑、手机了，但是在电子世界模拟纸张还是主流之一，它的形式就是PDF。 

PDF目前还被广泛使用，所以我们还需要在电子世界实现纸质世界的机制。今天就来聊聊将内容发布成PDF时，怎样实现左手页、右手页和故意留白页。

- 2 -

生成面向纸张输出的标准

万维网联盟（World Wide Web Consortium，简称 W3C）创建于1994年，是Web技术领域具有权威和影响力的国际中立性技术标准机构。W3C已发布了400多项影响深远的Web技术标准及实施指南。

为了生成面向纸张的输出，这个组织设计了两套标准，他们分别是：XSL-FO和CSS。

最初CSS只是用了做网页的渲染。2014年CSS3增加了基于页面媒体模块的工作草案，可用于支持基于纸张的发布。

- 3 -

如何实现

在CSS中，通过以下方式定义页面：

页面被分成这几个区域：

通过以下代码实现左手页，右手页和故意留白页：

/* 右手页 */
@page:right {
  @top-left {
    content: "Beautify Day";
    border-bottom: solid black;
    vertical-align: bottom;
  }

  @top-center {
    content: "";
    border-bottom: solid black;
    vertical-align: bottom;
  }

  @top-right {
    content: "";
    border-bottom: solid black;
    vertical-align: bottom;
  }

  @bottom-left {
    content: "";
    border-top: solid black;
    vertical-align: top;
  }

  @bottom-center {
    content: "";
    border-top: solid black;
    vertical-align: top;
  }

  @bottom-right {
    content: counter(page);
    border-top: solid black;
    vertical-align: top;
  }
}

/* 左手页 */
@page:left {
  @top-left {
    content: "";
    border-bottom: solid black;
    vertical-align: bottom;
  }

  @top-center {
    content: "";
    border-bottom: solid black;
    vertical-align: bottom;
  }

  @top-right {
    content: "Beautify Day";
    border-bottom: solid black;
    vertical-align: bottom;
  }

  @bottom-left {
    content: counter(page);
    border-top: solid black;
    vertical-align: top;
  }

  @bottom-center {
    content: "";
    border-top: solid black;
    vertical-align: top;
  }

  @bottom-right {
    content: "";
    border-top: solid black;
    vertical-align: top;
  }
}

/* 故意留白页 */
@page :blank{
  @top-left {
    content: none;
  }
  @top-right {
    content: none;
  }
}

如果你想了解更多细节，请参考我在Infomagic学院讲的《DITA文档发布和样式定制》课程

摩拿科技自研产品：结构化文档系统MxDoc，代理产品：Oxygen XML Editor + 技术服务

访问摩拿官网联系我们