Page 21 - css揭秘

本书是怎样炼成的

通俗地说，这本书在技术上是自产自销的。它完全用 HTML5 写成，
并 用 到 了 一 些 由 O’Reilly 的 HTMLBook 标 准（http://oreillymedia.github.io/
HTMLBook）定义的 data- 属性。这意味着你在这本书里看到的每样东西
（包括布局、图片、颜色等）都是由 CSS 渲染出的 HTML。大量图片是由
SVG 生成的，或者是由 SCSS 函数生成的 SVG data URI。书中为数不多的数
学公式是在 LaTeX 中写成的，然后转换成 MathML。有一点可能会让你意想
不到，书中的所有页码、章节号、攻略编号都是由纯粹的 CSS 计数器生成的。

目 前 O’Reilly 出 版 的 绝 大 多 数 图 书 都 是 以 这 种 方 式 制 作 出 来 的。
O’Reilly 专门为这件事搭建了一个叫作 Atlas（http://atlas.oreilly.com）的系
统。Atlas 最美好的地方在于，它并不只是供 O’Reilly 官方专用的，对公众
也开放。

不过这本书并不能算是 Atlas 的典型案例。实际上，在将 CSS 用于书
籍排印这件事上，这本书将这种可能性推到了极致——据我所知，还没有其
他书做到这个程度。它帮助我们发现了 Atlas 和 Antenna House（Atlas 采用
的 PDF 渲染器）中的许多 bug；甚至 CSS 规范自身也有很多与排印有关的
问题暴露出来，我将这些问题都递交给了 CSS 工作组。
你可能会问：“使用 Web 技术来打造这样一本书究竟要花费多少代
码？”让我们来看一些（正式出版前的）统计数据。

„ 这本书的样式动用了 4700 行 SCSS 代码，编译成 CSS 后有 3800 行。
„ 大约 10 000 行出头的 HTML 代码。
„ 在整本书用到了 322 张插图，但只有 140 张是图片文件（包括 SVG 图
片和屏幕截图），绝大多数插图都只是一系列加了 CSS 样式的 div 标签
而已。（这些用于插图的样式占到全书 CSS 和 SCSS 代码量的 65% ！）

xviii 本书是怎样炼成的

඀ࠡ JOEC