保存成功
订阅成功
保存失败,请重试
提交成功

一本由译者自己排版的书:谈谈HTML+CSS在中文图书排版中的实际运用

资深技术图书译者,全栈程序员,热爱从编程到机器学习的各种技术,已翻译出版技术和科普类图书11本。
查看本场Chat

用HTML+CSS进行图书出版

最近我的新译作《物理是什么》出版了,这本书是日本著名物理学家,诺贝尔奖得主朝永振一郎先生的遗作,算是介绍物理和科学史的一部名作。当然,对于我来说,这本书还有另外一个意义,因为这本书是我自己用HTML+CSS排版输出的,据图灵的编辑说,这可能是图灵第一本不用InDesign排版的书,可能也是第一本由作译者自己排版的书。无论如何,用HTML+CSS排版是一件很有趣的事情,相比传统排版来说有一些优点,我想把这次的经验写下来,和大家分享。当然,在实际作业的过程中也遇到了一些问题,我也采用了一些方法去解决,我采用的方法可能不是最优解,也希望大家帮我指出来,共同进步。

本书部分源代码和脚本已作为示例发布在GitHub上,供大家参考。

图书出版的大致工作流程

在讲排版之前,先说说图书出版大致要经过怎样的工作流程。对于事务性的流程就不展开说了,主要说一些和文稿相关的部分。

要印书,首先当然要有原稿。原稿的格式可能千奇百怪,在数字文稿当中,最常用的大概是Word文档,Mac用户可能会用Pages,也有些IT圈子的作者喜欢用Markdown,学术圈的可能会用TeX等等。原稿需要提交给出版社的编辑进行校对、修改和润色,编辑有自己的工作环境,所以可能大部分编辑会要求作者提供Word格式的原稿,这里就会涉及到一次格式转换。

编辑跟作者修改过一轮之后,就会把原稿发给排版公司进行排版,对于排版中的一些格式要求,编辑会在原稿里注明。排版公司用的排版软件一般是Adobe InDesign,这里又会涉及到一次格式转换,或者说是将Word原稿中的内容导入到InDesign中的过程。最后,排版公司会输出PDF文件,和编辑再进行几轮校对和修改之后,由编辑将PDF交给印制人员到印刷厂付印。

我们发现在这个流程中至少涉及两次格式转换,一次是作者自己的原稿要转换成编辑的工作格式(例如Word),还有一次是编辑的工作格式需要导入到排版软件(例如InDesign)中进行处理。我们知道,格式转换越多,里面会产生的问题也就越多,我之前的一本译作就遇到过上标莫名其妙失效的问题,明明是52,最终PDF里变成了52,被读者投诉到爆,我也觉得很冤枉。

还有一个问题就是数学公式比较多的书,就比如《物理是什么》这本书,有几章里面包含大量的公式,这种书编辑都比较头大,因为排版公司经常会在公式上出毛病。在国际学术出版领域,一般都用高德纳大神的TeX来排版,作者一般也接受用TeX来写原稿,而众所周知地,TeX对公式的支持是非常棒的,于是整个流程中只需要用TeX就可以一站式解决问题了。不过,在非学术出版领域,TeX实在是没什么人用,据我所知,公式一般还是用Word的公式编辑器来进行编辑,最后导入到InDesign来处理的。我对InDesign不熟,也不知道它如何处理Word的公式,不过编辑经常跟我抱怨公式会出问题,看来InDesign在这方面做得也不咋地。

为什么选择HTML+CSS

从这本书来说,我之所以决定尝试一下自己排版,初衷也是为了把数学公式排得更好一些。其实,排版公司不是不能排公式,但我上面说过,在几次格式转换过程中,公式很容易出问题,如果书里公式很多,一个一个检查起来就特别费力,问题也不容易被发现。其实在出版领域有很多工具可以替代InDesign,最有名的当然就是TeX。我曾经想过直接用TeX,毕竟对数学公式支持很好,但TeX我完全没有接触过,如果从头学起来感觉代价有点大。后来我发现还有HTML+CSS这个选项,很多作译者朋友跟我说起,国外有一些技术图书就是用HTML+CSS排版的,我想既然在国外有这方面专业运用的经验,那么就意味着,HTML+CSS完全可以胜任专业出版的需求,既然如此何不试一试呢?

选择HTML+CSS的几个原因:

  • 对于有网页经验的程序员(比如我)来说学习成本很低。

  • 在国外有一定的专业出版运用案例。

  • 可以通过Javascript进行高级渲染,比如用MathJax渲染数学公式。

  • 可以无缝对接Markdown格式的原始文稿(虽然这次我没用)。

  • 可以用同一套源文件输出不同的格式,例如Word、EPUB。

  • 最重要的,符合程序员的习惯和美学

HTML+CSS排版的软件栈

基本架构

毋庸置疑,HTML+CSS这个体系中,HTML是文稿,CSS是样式,我们需要一个渲染器将它们渲染输出成PDF。我阅读了国外的一些技术文档,普遍推荐使用Prince来进行渲染输出。于是,一个最基本的软件栈是这样的:

基本架构

需要指出的是,Prince对于商用是需要购买授权的,单机版本的授权费用是495美元,这个价格不便宜,除此之外还有服务器授权等方式,具体看官方的购买页面。在不购买授权的情况下,Prince也提供免费的非商用版本,但非商用版本生成的PDF文件会在第一页的右上角加上一个水印。当然,如果你一定要想个取巧的办法,可以在第一页生成一个空白页,然后再把这一页从生成好的PDF中去掉。实践证明这是一个在技术上可行的方案,但这样的做法是违反软件许可协议的,因为许可协议规定不得删除非商用版本生成的水印,也不得将非商用版本用于商业用途。

Prince的命令行很简单,基本用法如下:

prince source1.html source2.html ... -o output.pdf

如果你的HTML源文件中没有引用CSS,也可以通过命令行指定一个外部的CSS文件:

prince source1.html source2.html ... -s styles.css -o output.pdf

关于Prince命令行用法,可以参考Prince官方文档

PDF后处理

无论是否要用上面这个取巧的办法,我们依然还是有必要对Prince生成的PDF加上一个后处理的步骤,因为出版社需要在正文的PDF前面加上一页扉页,扉页是由封面设计公司来制作的,我们只要把封面设计公司交付的一页PDF插到正文PDF前面就可以了。对PDF进行后处理有很多工具,我的习惯是写一个Python脚本,对PDF的处理使用了PyPDF2包。

互动评论
评论
清欢3 年前
花卷大大,如果对于一本含有大量代码的书籍,假设pdf提供全彩,代码有高亮对读者体验更好,代码高亮使用HTML和CSS怎样能够更优雅的实现呢?针对不同的类型文件,例如HTML和PHP,高亮语法的规则也不一样,该怎样处理不同类型文件的高亮语法规则?
评论
赵晋3 年前
我有这么一个想法,既然使用html和css排版,是不是可以,直接用程序控制内容和版面,实现为读者个性化定制一本可打印的书。如果是这样,由于内容可能不一样,版面的样式和大小也可能不一样,程序如何控制分页呢?
评论
赵晋3 年前
以及如何保证每页的空白区域美观
评论
小魔女佳妮🌻3 年前
只想给周老师比❤️
评论
哈比3 年前
请您以一个过来人的身份思考,假设一名非程序员觉得这种写书方式很合心意,为了掌握这种方式包括其中写轮子的技巧,需要耗费多大精力,是否本末倒置?假设有一个擅长 HTML+CSS 的程序员打算用这种方式写书,这种方式在这类人群中推行的可能性有多大?主要的非技术难点在哪?
评论
哈比3 年前
整篇文档看下来,您自己「造轮子」为您写书并排版 提供了不少便利,假如时间回到您写书之前,有一个编辑给你看这份文档,给您做参考。请问您可能在哪个环节觉得困难,为了解决这个困难,您可能会有哪些下一步动作?(这个问题其实是问您用 HTML+CSS 写书的哪个部分最难)
评论
哈比3 年前
我知道很多人喜欢用 Markdown 来写文章甚至写书,因为写的过程中不用太在意格式(只要一直写,在想要的地方做标记就行),我学过一些 CSS 和 HTML,感觉它们和 Markdown 还是不太一样,你得在脑子里想象很多可视化的东西,比 Markdown 复杂。请问您在写作过程中,是否遇到过过于关注格式而丢掉了专心于内容的状态?有没有过旁人建议你放弃这种写作方式?您在面对这种建议的时候,当时是怎么想的,您如何坚持不动摇地用这种方式写书?
评论
哈比3 年前
会不会出现这样一种状况,别人也用 HTML+CSS 来写书,但是审美水平不高,排版知识薄弱。出来的效果并不好,而用 HTML+CSS 之后,专业编辑想用 InDesign 再排版反而有困难了?您在编写这本书的时候,有跟编辑主动沟通过这个吗?编辑有提供什么实用的建议吗?
评论
哈比3 年前
补充一点,《CSS揭秘》这本书(作者 Lea Verou,译者 张鹏)是完全用 HTML5 写成的,并用到了一些由 O’Reilly 的 HTMLBook 标准定义的 date- 属性。这本书里的每样东西(包括布局、图片、颜色等)都是由 CSS 渲染出的 HTML。
评论
华仔3 年前
我试了一下,有几个跟W3C的不一样,border-lentgh,punctuation-trim,text-justify-trim,text-autospace,分别是标点挤压行末半角,两个两点在一起起调整,字间距调整等命令。好像PR不支持。 还有表格换页时能加上续表么。 还有词条功能,就是这一页上面有很多的单词,把这页出现的单词放在书眉上去。
评论
华仔3 年前
非常好文,值得学习,
评论
查看更多