turning HTML and CSS into PDF by way of Prince

Blue-sky printing with Prince 8

The biggest news in Prince 8 is the introduction of JavaScript. JavaScript is the programming language of choice on the web. In Prince 8, JavaScript is put to good use. Also, Prince 8 supports CSS3 transforms which will make your head, and other elements, spin. Check out the HTML page and the resulting PDF document.

Pointing to figures in JavaScript

In books, it is common to refer to figures “on page x”, or “on the next page”. In Prince 7, authors can refer to figures (and other elements) by way of page numbers, but there is no way to detect when a figure is on the next or previous page. Prince 8 introduces a way to do this: The text can be automatically changed based on where the figure ends up. This is accomplished through a simple JavaScript. Here is the HTML document and here is the resulting PDF file.

Creating an index in JavaScript

Can JavaScript be used to automatically generate an index, like those found at the back of books? The answer is yes, to a point. In this example, some terms in the document have been tagged for inclusion in the index. The script attached to the page looks for these tags (span elements, actually), and creates an alphabetized list of pointers to them. Thereafter, Prince adds page numbers by way of CSS. The resulting PDF file has an index at the end. Some things are missing, though: commas between page numbers and the collapsing of equal page numbers into one link. The latter is tricky to achieve as the script runs before page numbers are generated.

Welcome, JavaScript

Prince 8 adds support for JavaScript which can — using the DOM — manipulate the content of the document. One example is the table of contents, which can be generated dynamically by a small script that (a) scans the documents for chapter headings, (b) generates a list with elements pointing to the chapter headings, and (c) inserts the list at the start of the document. To show of this new feature, we have Oliver Twist — a classic literary work with lots of chapters — and added a small JavaScript along with a CSS snippet. Here’s the HTML source file and the resulting PDF file.

Prince, the 7th

To showcase the formatting magic that Prince can do, we have created one document packed with effects. The HTML document, which is contained in a 13k file, is packed with features: bi-directional text, OpenType features, CSS3 footnotes, web fonts (including WOFF), and CSS3 page floats. You can download the PDF document or the HTML source. To produce the same PDF document from on your own computer, you should have the Arno Pro font installed.

Ibsen reconstructed

Henrik Ibsen’s collected poems were first printed in 1871. The first edition was, as were most books at the time, set in lead by skilled printers. In 2010, I recreated the first edition in HTML and CSS. The «Steinschrift» and «Elzevir» fonts that were used by the printers in 1871 have not been transferred to the digital domain, but lookalikes were found. The resulting PDF file was printed in 100 copies and bound the old-fashioned way.

The Guardian’s secrets — leaked!

NewspaperUsing Prince, web content can easily be recast into PDF. To show how this can be done, we have recreated a PDF newspaper from The Guardian. The text and images were extracted from the original PDF file and the content was encoded in HTML. Using Prince, a new PDF file was created. (Original PDF, HTML, Prince-generated PDF)

Fiction: hard to write, easy to format

FictionUsing the boom! microformat, it’s easy to create books from HTML. Mark Burgess wrote his novel, called Slogans, in LaTeX. We converted it to HTML and added a few class names from the boom! vocabulary. Also, the boom! style sheet was modified in a few places to create the kind of presentation the author wanted. Notice how the content of the back cover is shown first in the HTML version. We encourage you to read the novel and let the author know if you like it. (HTML, boom! style sheet, Prince-generated PDF)

Boom! A microformat for books

CSS bookIn 2005, Addison-Wesley published a book that was formatted by Prince. Cascading Style Sheets – Designing for the web by Håkon Wium Lie and Bert Bos describes the power of CSS. To prove how powerful it can be, the authors decided to use CSS in the production process. They later described their approach in an article on A list apart: Printing a Book with CSS: Boom!. Prince is currently the only product which is able to produce print-quality PDF files from HTML and CSS files. (HTML, CSS, PDF)

Product catalogs

Product catalogs are complex publications where errors can be fatal. Increasingly, they are offered both on the web and in print. By producing both versions from the same set of files, errors can be minimized. We have created a ficticious product catalog for fine flags that show how a PDF product catalog can be produced from a simple HTML file (PDF, HTML with CSS). The flags themselves are SVG files fetched from Wikipedia. Notice how the table is run into two columns. The table header and footer is repeated in both columns. The headers and footers reflect information (product codes and country names) from the pages. The background of the front page is one SVG image that is automatically repeated.