Table of Contents for

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.

• There are 322 figures in the entire book, but only 140 image files (including SVG images and screenshots), as most figures are just a series of divs styled with CSS. (Figure styling accounts for 65% of the book’s CSS and SCSS code!)

Here is a list of tools used in making this book, besides Atlas:

• Git for version control

• SCSS for CSS preprocessing

• The entire book was written in the Espresso (macrabbit.com/espresso) text editor

• CodeKit was used for compiling SCSS to CSS

• Dabblet (dabblet.com) was used for the live demos and for the few figures that are screenshots of the demos

• The SVG-based figures that were not hand coded were created in Adobe Illustrator

• Adobe Photoshop was used to edit screenshots, when needed

The fonts used were Rockwell for the headings, Frutiger for the body text, Consolas for the code, and Baskerville for the dedication and many figures.

The book was written on a 13″ MacBook Air, in a variety of countries, including Greece, Kenya, Australia, New Zealand, the Philippines, Singapore, Chile, Brazil, the United States, France, Spain, the UK, Wales, Poland, Canada, and Austria.