Printing a Guide with CSS: Growth!

HTML and CSS, two of our favourite acronyms, are generally related to internet pages. And deservedly so: HTML is the dominant report layout on the net and CSS is used to genre maximum HTML pages. However, are they appropriate for off-screen use? Can CSS be used for severe print jobs? To determine, we determined to take without equal problem: to provide the following version of our e-book at once from HTML and CSS recordsdata. On this article we caricature our answer and quote from the manner sheet used. Against the top we describe the e-book microformat (increase!) we advanced within the procedure.

The studious reader might need to fetch a pattern HTML document, pattern genre sheet, in addition to the PDF document generated by means of Prince. The PDF document is very similar to the only we despatched to the printer. We inspire you to base your personal e-book at the pattern document and let us know the way it is going.

Print vs. pixel#section1

A published e-book has many options no longer noticed on displays. There are web page numbers, headers and footers, a desk of contents, and an index. The content material should be cut up into pages of mounted measurement, and cross-references inside the e-book (as an example, “see definition on web page 35”) should be resolved. After all, the content material should be transformed to PDF, which is shipped to the printer.

Internet browsers are just right at coping with pixels on a display, however no longer excellent at printing. To print a complete e-book we became to Prince, a devoted batch processor which converts XML to PDF by the use of CSS. Prince helps the print-specific options of CSS2, in addition to capability proposed for CSS3.


CSS2 has a perception of paged media (assume sheets of paper), versus steady media (assume scrollbars). Taste sheets can set the scale of pages and their margins. Web page templates can also be given names and components can state which named web page they need to be revealed on. Additionally, components within the supply report can power web page breaks. Here’s a snippet from the manner sheet we used:

@web page {   measurement: 7in 9.25in;   margin: 27mm 16mm 27mm 16mm; }

Having a US-based writer, we got the web page measurement in inches. We, being Europeans, endured with metric measurements. CSS accepts each.

After atmosphere the up the web page measurement and margin, we would have liked to ensure there are web page breaks in the proper puts. The next excerpt displays how web page breaks are generated after chapters and appendices:

div.bankruptcy, div.appendix {   page-break-after: at all times; }

Additionally, we used CSS2 to claim named pages:

div.titlepage {   web page: clean; }

This is, the name web page is to be revealed on pages with the title “clean.” CSS2 described the idea that of named pages, however their price best turns into obvious when headers and footers are to be had. For this we need to flip to CSS3.


The CSS Operating Crew has revealed a CSS3 Module for Paged Media. It describes further capability required for printing. We will be able to get started by means of taking a look at working headers and footers.

Headers and footers#section4

This is an instance:

@web page :left {   @top-left {     content material: "Cascading Taste Sheets";   } }

The instance above places a string (“Cascading Taste Sheets”) within the height left nook of all left-hand facet pages of the e-book. All pages? No longer slightly. A next rule gets rid of the header from pages named “clean”:

@web page clean :left {   @top-left {     content material: customary;   } }

Recall from previous that each one <div magnificence=“titlepage”></div> components are to be revealed on “clean” pages. Given the manner sheet above, “clean” left-hand facet pages will likely be revealed with no header.

Stealing strings#section5

Our e-book is composed of many chapters and the name of every bankruptcy is displayed in a header on right-hand facet pages. To reach this, the name string should be copied from a component with the string-set belongings:

h1 {   string-set: header content material(); }

Similar to there have been named pages within the earlier segment, CSS3 additionally has named strings. Within the instance above, the string named “header” is assigned the bankruptcy headings. Every time a bankruptcy heading is encountered, the bankruptcy name is copied into this string. The string can also be referred to in different portions of the manner sheet:

@web page :appropriate {   @top-right {     content material: string(header, first);    } }

Within the instance above, the right-hand facet header is about to be the price of the “header” string. The key phrase “first” indcates that we would like the primary price of “header” in case there are a number of assignments on that web page.

Web page numbers#section6

Like headers, web page numbers are a navigational help in books. Atmosphere the web page numbers is straightforward:

@web page :left {   @bottom-left {     content material: counter(web page);   } }

One requirement from our writer was once to make use of roman numerals within the first a part of the e-book. This phase is known as “front-matter”. This is the manner sheet for roman web page numbers within the front-matter:

@web page front-matter :left {   @bottom-left {     content material: counter(web page, lower-roman);   } }

The numbering programs are the similar as for the list-style-type belongings and lower-roman is one in all them. The counter known as “web page” is predefined in CSS.


The internet is a large choice of cross-references: all links are cross-references. Go-references in books are identical in nature, however offered otherwise. As a substitute of the blue underlined textual content we all know from our displays, books include textual content equivalent to “see the determine on web page 35.” The quantity “35” is unknown to the authors of the e-book—one can best to find the web page quantity by means of formatting the content material. Due to this fact, the quantity “35” can’t be typed into the manuscript however should be inserted by means of the formatter. To take action, the formatter wishes a pointer to the determine. In HTML, that is carried out with an A detail:

<a category="pageref" href="#determine"gt;see the determine</a>

The corresponding genre sheet looks as if this:

a.pageref::after {    content material: " on web page " target-counter(attr(href), web page)  }

The instance above wishes some clarification. The selector refers to a generated pseudo-element (::after) which comes after the content material of the A detail. The primary a part of that pseudo-element is the string ” on web page ”. After that comes probably the most fascinating phase, the target-counter serve as which fetches the price of the “web page” counter on the location pointed to by means of the “href” characteristic. The result’s a that the string ” on web page ” is concatenated with the quantity “35”.

Desk of contents#section8

An identical magic is invoked to generate a desk of contents (TOC). Given a number of links pointing to chapters, sections and different TOC entries, the manner sheet describes how you can provide the links as TOC. Here’s a pattern TOC access:

<ul magnificence="toc"> <li><a href="#intro">Advent</a></li> <li><a href="#html"><abbr name="HyperText Markup Language">HTML</abbr></a></li> </ul>

The way sheet for the TOC makes use of the similar target-counter to fetch a web page quantity:

ul.toc a::after {   content material: chief('.') target-counter(attr(href), web page); }

Additionally, a brand new serve as, chief, is used to generate “leaders.” In typography, a “chief” is a line that guides the attention from the textual access to the web page quantity. In our instance, a suite of dots is added between the textual content and the web page quantity:

Advent….................1 HTML….........................3

Word that the this capability is experimental; no Operating Draft for leaders has been revealed but.

The e-book microformat—increase!#section9

As in case you have guessed by means of now, we succeeded in generating our e-book the usage of HTML and CSS. In doing so, we additionally advanced a suite of conventions for marking up a e-book in HTML. HTML has the fantastic magnificence characteristic which we could someone lengthen the semantics of HTML paperwork whilst development on HTML’s universally identified semantics. So, in our e-book, we used a wealthy set of HTML components and added a number of magnificence names.

Since then, the idea that of “microformats” has entered the internet and we’re satisfied to find that we in reality advanced (a minimum of the beginnings of) a microformat for books. We expect different authors will likely be in a position use the increase! microformat and beef up upon it within the procedure.

Sections of a e-book#segment10

The chapters within the first a part of the e-book, equivalent to preface, foreword, and desk of contents, are enclosed in a DIV with a corresponding magnificence title. The chapters in the principle frame are DIVs with a magnificence of “bankruptcy” and the appendices are DIVs with magnificence “appendix.” Within the genre sheet, the magnificence names are essentially used to make a choice the right kind named web page with the right kind headers and footers.

Even if HTML has six ranges of headings (H1, H2, and many others.) to differentiate bankruptcy headings, segment headings, and subsection heading, it’s handy to surround sections in a component, if best in an effort to genre the top of a bit. We used a DIV with magnificence “segment”.

Tables and figures#segment11

HTML doesn’t have a devoted detail for figures with captions, however it’s simple to create one by means of specializing a DIV:

<div magnificence="determine">   <p magnificence="caption">...</p>   <p magnificence="artwork"><img src="..." alt="..."/></p> </div>

The TABLE detail has a CAPTION detail, however give a boost to is spotty. We, due to this fact, used a identical technique for marking up tables:

<div magnificence="desk">   <p magnificence="caption">...</p>   <desk magnificence="coated">     ...   </desk> </div>

We used quite a few determine kinds (customary, broad, at the facet, and many others.) and desk kinds (customary, broad, coated, top-floating, and many others.) in our e-book. A component can also be given a number of magnificence names, in order that, say, a desk can also be each “coated” and “broad.” We’ve got lower down at the choice of choices within the pattern report for the sake of simplicity.

Aspect notes and facet bars#segment12

A DIV with magnificence “sidenote” is used for facet remarks, associated with the (following) textual content in the principle frame however no longer essentially proven in-line. An ordinary method to display them is to position them within the margin.

A “sidebar” is longer than a “sidenote.” The latter is normally just one paragraph, possibly two; the previous is a number of paragraphs or contains lists or different subject matter. Within the pattern report there may be one sidebar that floats to the highest, makes use of the total width of the web page, and is given a grey background.

Summing up#segment13

The Prince formatter has unfolded the processing pipeline from HTML and CSS to PDF. It’s now conceivable, even possible, to make use of HTML because the report layout for books. This makes it more uncomplicated to cross-publish content material on the net and in print.

That mentioned, authors who try to use the tactics described on this article will face some technical problems alongside the best way. As an example, we have now no longer mentioned how you can generate the TOC constructions and how you can show broad tables. We’ve got additionally left some room for growth within the increase! microformat. Alternatively, in comparison to the complications of in reality writing a e-book, formatting is now a pleasure!

You’ve “moved speedy and damaged issues.” Right here’s some useful recommendation from Jeremy Wagner to mend them responsibly. A key side of being a supervisor helps your reviews be triumphant. Lara Hogan stocks how on this excerpt from Resilient Control. Unexpectedly, I noticed that the folks subsequent to me may well be critically impacted by means of my paintings. I used to be having a snappy lunch within the airport… Retraining slim assumptions about customers’ gender identities is a step towards better protection, privateness, and validation for everybody. On this excerpt from On a regular basis Knowledge Structure, Lisa Maria Martin introduces the structural audit.