HTML and CSS, two of our favourite acronyms, are usually related to net pages. And deservedly so: HTML is the dominant doc format on the internet and CSS is used to fashion most HTML pages. However, are they appropriate for off-screen use? Can CSS be used for critical print jobs? To seek out out, we determined to take the last word problem: to provide the subsequent version of our e-book immediately from HTML and CSS recordsdata. On this article we sketch our answer and quote from the fashion sheet used. In direction of the tip we describe the e-book microformat (growth!) we developed within the course of.
Article Continues Beneath
The studious reader might wish to fetch a pattern HTML file, pattern fashion sheet, in addition to the PDF file generated by Prince. The PDF file is just like the one we despatched to the printer. We encourage you to base your individual e-book on the pattern file and inform us the way it goes.
A printed e-book has many options not seen on screens. There are web page numbers, headers and footers, a desk of contents, and an index. The content material should be break up into pages of mounted measurement, and cross-references throughout the e-book (for instance, “see definition on web page 35”) should be resolved. Lastly, the content material should be transformed to PDF, which is distributed to the printer.
Net browsers are good at coping with pixels on a display screen, however not excellent at printing. To print a full e-book we turned 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 performance proposed for CSS3.
CSS2 has a notion of paged media (suppose sheets of paper), versus steady media (suppose scrollbars). Model sheets can set the scale of pages and their margins. Web page templates will be given names and parts can state which named web page they wish to be printed on. Additionally, parts within the supply doc can drive web page breaks. Here’s a snippet from the fashion 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, continued with metric measurements. CSS accepts each.
After setting the up the web page measurement and margin, we would have liked to verify there are web page breaks in the precise locations. The next excerpt exhibits how web page breaks are generated after chapters and appendices:
div.chapter, div.appendix {
page-break-after: at all times;
}
Additionally, we used CSS2 to declare named pages:
div.titlepage {
web page: clean;
}
That’s, the title web page is to be printed on pages with the identify “clean.” CSS2 described the idea of named pages, however their worth solely turns into obvious when headers and footers can be found. For this we now have to show to CSS3.
The CSS Working Group has printed a CSS3 Module for Paged Media. It describes further performance required for printing. We are going to begin by working headers and footers.
Headers and footers#section5
Right here is an instance:
@web page :left {
@top-left {
content material: "Cascading Model Sheets";
}
}
The instance above places a string (“Cascading Model Sheets”) within the prime left nook of all left-hand aspect pages of the e-book. All pages? Not fairly. A subsequent rule removes the header from pages named “clean”:
@web page clean :left {
@top-left {
content material: regular;
}
}
Recall from earlier that each one <div class=“titlepage”></div> parts are to be printed on “clean” pages. Given the fashion sheet above, “clean” left-hand aspect pages will probably be printed with no header.
Stealing strings#section6
Our e-book consists of many chapters and the title of every chapter is displayed in a header on right-hand aspect pages. To attain this, the title string should be copied from a component with the string-set property:
h1 {
string-set: header content material();
}
Identical to there have been named pages within the earlier part, CSS3 additionally has named strings. Within the instance above, the string named “header” is assigned the chapter headings. Every time a chapter heading is encountered, the chapter title is copied into this string. The string will be referred to in different elements of the fashion sheet:
@web page :proper {
@top-right {
content material: string(header, first);
}
}
Within the instance above, the right-hand aspect header is ready to be the worth of the “header” string. The key phrase “first” indcates that we wish the primary worth of “header” in case there are a number of assignments on that web page.
Web page numbers#section7
Like headers, web page numbers are a navigational help in books. Setting the web page numbers is simple:
@web page :left {
@bottom-left {
content material: counter(web page);
}
}
One requirement from our writer was to make use of roman numerals within the first a part of the e-book. This half is known as “front-matter”. Right here is the fashion 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 identical as for the list-style-type property and lower-roman is considered one of them. The counter referred to as “web page” is predefined in CSS.
Cross-references#section8
The net is a large assortment of cross-references: all hyperlinks are cross-references. Cross-references in books are comparable in nature, however introduced in a different way. As a substitute of the blue underlined textual content we all know from our screens, books include textual content akin to “see the determine on web page 35.” The quantity “35” is unknown to the authors of the e-book—one can solely discover the web page quantity by formatting the content material. Due to this fact, the quantity “35” can’t be typed into the manuscript however should be inserted by the formatter. To take action, the formatter wants a pointer to the determine. In HTML, that is achieved with an A aspect:
<a category="pageref" href="#determine"gt;see the determine</a>
The corresponding fashion sheet seems to be like this:
a.pageref::after {
content material: " on web page " target-counter(attr(href), web page)
}
The instance above wants some rationalization. The selector refers to a generated pseudo-element (::after) which comes after the content material of the A aspect. The primary a part of that pseudo-element is the string ” on web page ”. After that comes probably the most attention-grabbing half, the target-counter operate which fetches the worth of the “web page” counter on the location pointed to by the “href” attribute. The result’s a that the string ” on web page ” is concatenated with the quantity “35”.
Desk of contents#section9
Related magic is invoked to generate a desk of contents (TOC). Given a bunch of hyperlinks pointing to chapters, sections and different TOC entries, the fashion sheet describes the right way to current the hyperlinks as TOC. Here’s a pattern TOC entry:
<ul class="toc"> <li><a href="#intro">Introduction</a></li> <li><a href="#html"><abbr title="HyperText Markup Language">HTML</abbr></a></li> </ul>
The fashion sheet for the TOC makes use of the identical 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 operate, chief, is used to generate “leaders.” In typography, a “chief” is a line that guides the attention from the textual entry to the web page quantity. In our instance, a set of dots is added between the textual content and the web page quantity:
Introduction….................1 HTML….........................3
Notice that the this performance is experimental; no Working Draft for leaders has been printed but.
The e-book microformat—growth!#section10
As you most likely have guessed by now, we succeeded in producing our e-book utilizing HTML and CSS. In doing so, we additionally developed a set of conventions for marking up a e-book in HTML. HTML has the fantastic class attribute which lets anybody prolong the semantics of HTML paperwork whereas constructing on HTML’s universally recognized semantics. So, in our e-book, we used a wealthy set of HTML parts and added a bunch of class names.
Since then, the idea of “microformats” has entered the net and we’re blissful to find that we truly developed (a minimum of the beginnings of) a microformat for books. We expect different authors will probably be ready use the growth! microformat and enhance upon it within the course of.
Sections of a e-book#section11
The chapters within the first a part of the e-book, akin to preface, foreword, and desk of contents, are enclosed in a DIV with a corresponding class identify. The chapters in the principle physique are DIVs with a class of “chapter” and the appendices are DIVs with class “appendix.” Within the fashion sheet, the class names are primarily used to pick out the proper named web page with the proper headers and footers.
Though HTML has six ranges of headings (H1, H2, and many others.) to differentiate chapter headings, part headings, and subsection heading, it’s handy to surround sections in a component, if solely to have the ability to fashion the tip of a bit. We used a DIV with class “part”.
Tables and figures#section12
HTML doesn’t have a devoted aspect for figures with captions, however it’s simple to create one by specializing a DIV:
<div class="determine"> <p class="caption">...</p> <p class="artwork"><img src="https://alistapart.com/article/growth/..." alt="https://alistapart.com/article/growth/..."/></p> </div>
The TABLE aspect has a CAPTION aspect, however assist is spotty. We, due to this fact, used an analogous technique for marking up tables:
<div class="desk">
<p class="caption">...</p>
<desk class="lined">
...
</desk>
</div>
We used a wide range of determine kinds (regular, huge, on the aspect, and many others.) and desk kinds (regular, huge, lined, top-floating, and many others.) in our e-book. A component will be given a number of class names, in order that, say, a desk will be each “lined” and “huge.” We have now minimize down on the variety of alternate options within the pattern doc for the sake of simplicity.
Aspect notes and aspect bars#section13
A DIV with class “sidenote” is used for aspect remarks, associated to the (following) textual content in the principle physique however not essentially proven in-line. A typical method to present them is to place them within the margin.
A “sidebar” is longer than a “sidenote.” The latter is often just one paragraph, perhaps two; the previous is a number of paragraphs or consists of lists or different materials. Within the pattern doc there’s one sidebar that floats to the highest, makes use of the total width of the web page, and is given a grey background.
The Prince formatter has opened up the processing pipeline from HTML and CSS to PDF. It’s now attainable, even possible, to make use of HTML because the doc format for books. This makes it simpler to cross-publish content material on the internet and in print.
That mentioned, authors who try to make use of the methods described on this article will face some technical points alongside the best way. For instance, we now have not mentioned the right way to generate the TOC constructions and the right way to show huge tables. We have now additionally left some room for enchancment within the growth! microformat. Nonetheless, in comparison with the complications of really writing a e-book, formatting is now a pleasure!