CSS Secrets

Making of

This is a book that eats its own dog food, proverbially speaking. It was written in clean HTML5, with a few data- attributes, defined by O’Reilly’s HTMLBook standard (oreillymedia.github.io/HTMLBook). This means that everything you see in this book—the layout, the figures, the colors—is HTML styled with CSS. A lot of the figures are also generated with SVG or use SVG data URIs, generated via SCSS functions. The few math formulas were written in LaTeX and then converted to MathML behind the scenes. You may find it amusing that the page numbers, chapter numbers, and secret numbers are merely CSS counters.

Many of the books O’Reilly publishes these days are made that way. They have built a system especially for this purpose, called Atlas (atlas.oreilly.com). The best thing about Atlas is that it’s also available for the public, not just for official O’Reilly use.

However, this book was not a typical Atlas use case. It pushed the limits of what is possible today with CSS for printing, in a way that—to my knowledge—no other book has. It helped us find many bugs in Atlas and Antenna House (the PDF renderer used by Atlas) and even many issues with the print-related CSS specifications themselves, which I took to the CSS WG.

“How much code does it take to make a book like this with web technologies?” you might ask. Let’s look at a few statistics (before production):

• This book is styled with 4,700 lines of SCSS, compiling to 3,800 lines of CSS.

• A little over 10,000 lines of HTML. ...