打印网页,第 2 部分:用于打印书籍的 HTML 和 CSS

主要观点:HTML 和 CSS 主要用于屏幕渲染,对于书籍所需的高级打印功能有限,但 W3C 起草了一些惊人的 CSS 功能可使 HTML 和 CSS 成为编辑书籍的便捷方式,通过 HTML 和 CSS 可生成包含多种高级打印效果的书籍,如全尺寸封面、页码、目录、章节标题自动渲染、URL 链接渲染为带编号的脚注等,还介绍了如何用@page定义页面参数、显示页码、利用string-set属性显示章节标题、将链接渲染为脚注、生成目录、添加封面页、各种布局调整技巧(如处理章节开始页面、改善段落渲染、插入空白页等),现代浏览器不支持文中所用的大部分 CSS 功能,可使用 Prince XML 工具将 HTML 文件转换为 PDF 文件,且提供了本地安装和 Docker 镜像两种方式。

关键信息:

  • 演示仓库生成包含示例的书籍:https://github.com/michaelperrin/blog-css-book-demo,其 PDF 文件可下载:https://github.com/michaelperrin/blog-css-book-demo/raw/master/build/book.pdf
  • @page规则可定义页面参数,如页面大小、边距、伪类等
  • 显示页码的 CSS 代码:@page { @bottom-center { content: counter(page); } }
  • 利用string-set属性显示章节标题:h2 { string-set: chapter_title content(); }
  • 将链接渲染为脚注的 CSS 代码:article { counter-reset: footnote; }
  • 生成目录的 HTML 和 CSS 代码
  • 封面页的 HTML 和 CSS 代码:.cover { page: cover; … }
  • 各种布局调整技巧的 CSS 代码,如处理章节开始页面、改善段落渲染、插入空白页等
  • 使用 Prince XML 工具将 HTML 文件转换为 PDF 文件,可本地安装或使用 Docker 镜像:docker run —rm -v “pwd”:/data michaelperrin/prince:latest -o /data/build/book.pdf /data/book.html

重要细节:

  • 不同地区可根据需要选择英寸或厘米等单位定义页面参数
  • leader()函数用于在目录中渲染章节标题后的点
  • target-counter函数用于获取链接指向页面的页码
  • orphanswidows属性用于定义段落在页面底部和下一页顶部的最小行数
  • 定义特殊的blank-page类用于插入空白页并设置相关样式
阅读 15
0 条评论