主要观点: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
函数用于获取链接指向页面的页码orphans
和widows
属性用于定义段落在页面底部和下一页顶部的最小行数- 定义特殊的
blank-page
类用于插入空白页并设置相关样式
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。