史上最棒的 CSS 技巧 Vol. I 电子书 (PDF 和 EPUB)

Avatar of Chris Coyier
Chris Coyier

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

当我写“书” 史上最棒的 CSS 技巧 Vol. I 时,我把它放在引号里,因为这并不是一本真正的书。您只能在线阅读它,登录到这个网站,并且拥有 MVP 支持会员资格(现在不再需要)。没有印刷版,甚至没有您从数字书籍中期望得到的数字副本。

我现在改变了这一点,并提供了 PDF 和 EPUB 版本 的书籍。会员可以免费下载 - 只需将它们添加到您的购物车并结账。

所有这些写书的事情都是一个实验。我喜欢在这个网站上以博客文章的形式写作,所有内容都在 URL 上,并且可以包含交互式内容。作为数字媒体,我可以控制访问权限等。这意味着我可以以一种让我感觉舒适的方式写作,并且也许,也许,我可以更有效率。也许我可以完成我已经有很多想法的 Vol. II。也许我可以写一些我一直在考虑的其他书。现在我有一个系统!一个写作的地方,多个发布的地方,以及一种销售它的方法。

制作数字版本

当我最初选择在线写这本书时,我认为 PDF 会非常简单。我会在“原始”模板上输出内容(只是一个干净的起点,可以持续并且易于预览),应用漂亮的打印样式的 CSS,然后毫不夸张地说,只需 ⌘P(打印)并“另存为 PDF”。就完成了。

Print dialog bog in Google Chrome, with the Save as PDF option chosen.

实际上有点用。您可以调整设置(例如,为了让代码块上的深色背景上的白色文本“✔ 打印背景图形”,可以使其相当不错。但存在一些问题 - 例如,您无法很好地控制每个页面的页眉或页脚。更不用说它不是程序化的,而是一个非常手动的方法。

我的目标是通过编程方式进行操作。然后我偶然发现了 Baldur Bjarnason 的 这篇博客文章,他在其中寻找工作

• 您是否需要创建像书一样走路、说话、阅读的网站或多个网站,但您制作的所有东西看起来都像博客?

• 您是否在使用网络技术处理 PDF、DOCX 或 EPUB 等文件格式时遇到困难?

• 您是否尝试从您的网站或 CMS 生成 PDF 或电子书?

是的,是的是的

以编程方式创建电子书

我联系了 Baldur,他能够帮助我完成所有这些工作。他为我创建了一个自动化系统,该系统接受一个本地 .html 文件,并自动从该单个文件生成 PDF、EPUB 和 MOBI 格式。本质上,我可以从命令行运行 make,它会完成所有工作,利用开源工具。

VS Code showing there terminal open running a Makefile script producing the eBooks.

不过,我仍然需要为机器准备近乎完美的 HTML,这需要一些工作。幸运的是,我已经准备好进行这项工作,因为我有 一个输出原始内容的特殊 URL(如果您不是会员,也可以看到它,只是内容被截断) 具有我想要的光打印样式。

工具

有了原始 HTML 和编程方法,以下是构成堆栈的工具

  • 对于 PDF 创建,我们尝试了 Paged.jsWeasyPrint。它们都有自己的怪癖,并且在某些方面做得比对方好或差。我们最终选择了 Paged.js。
  • 对于 EPUB 创建,我们使用了 pandoc
  • 对于 MOBI 创建(我们根本没有关注),我们使用了 Calibre。它是一个原生 Mac 应用程序,但它有一个可以从命令行调用的 ebook-convert 工具。

为了能够在命令行上使用这些工具,必须安装和准备好使用各种其他软件,例如 Pythonpangolibffi 等等。Baldur 的脚本使管理这些工具变得容易,这真是太棒了。

看起来 一个名为 Percollate 的新玩家 正在加入这个领域,但我们没有探索它。

将所有这些工具结合起来用于 HTML 到电子书创建的公共仓库

在我们一起完成这个过程之后,Baldur 慷慨地为所有人的参考创建了一个开源的简化公共仓库 (book-tricks)。在这个 Makefile 中有很多有用的魔法,如果它对处于我当时相同位置的人没有用,我会感到震惊:需要从简单的 HTML 创建电子书。

预览构建

当然,PDF 很容易查看(您甚至可以使用网页浏览器),但我通常会在 Preview.app 中打开它。

EPUB 在 Mac 上也同样容易,因为您只需将其放入 Books.app 中即可查看。

Mac app Books.app with the EPUB version of the book open.

对于 MOBI,Calibre 的主要功能是查看它们,所以这就是诀窍。

最痛苦的部分是反馈循环。需要更新代码(主要是 CSS),然后运行整个构建以查看它的外观。我确定我已经做了 100 多次才能让它变得正确。对于这种情况,真的应该有一个更好的方法,提供实时预览。

仅限网页与仅限电子书的内容

在写书过程的早期,我已经放弃了纸质版和数字版。我减少了对文本中图像的依赖,开始使用嵌入式 CodePen 演示来展示输出和代码。无论如何,这是网页的理想体验。但我不能在电子书中使用嵌入式 Pens。电子书可以做一些交互式的事情(例如,EPUB 当然支持动画 GIF 和链接),但运行 JavaScript 和使用 <iframe> 不是我想要 依赖的。如果我为所有内容都准备了合适的图像,那么也许它有一天就可以更加适合纸质出版了。

使用 display: none 从电子书输出中隐藏一些东西很容易,所以这就是我对所有嵌入式 Pens 所做的。(它们在转换为 iframe 之前是一些 HTML。)然后,为了拥有仅用于电子书版本的“替代”内容,我实际上只是将这些内容包装在 <div class="print-only"> 中,它在线隐藏,并在打印 CSS 中显示。我在 WordPress 块编辑器中创建了自定义块,以使编写这些块变得更容易。这样,我就可以真正看到我在做什么。

有趣的一点是,由于我在这里的目标是仅限电子书,因此我不必对打印样式表那样做 CSS 技巧,因为输出很可能是一些计算机纸张。例如,在打印样式表中,我通常会这样做

main a[href]::after {
  content: " (" attr(href) ") ";
}

这样,人们就可以在内容中看到链接的 URL。但对于这些数字电子书,我只是确保链接是蓝色的,它们将在任何数字格式中都可点击。


这是一段有趣的旅程!我主要很高兴在这个过程中我对所有这些都有一些了解,尤其是因为渲染数字画布是我的强项。但我只是上了几级台阶,因为这些东西的学习曲线非常陡峭!