printing css

Pointing to figures in JavaScript

howcome — Mon, 24 Oct 2011 19:59:57 +0000

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

howcome — Mon, 21 Mar 2011 22:21:16 +0000

We know that a table of contents can be created in Javascript, but what about an index? 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

howcome — Sat, 19 Mar 2011 13:35:07 +0000

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

howcome — Mon, 10 Jan 2011 19:09:16 +0000

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

howcome — Mon, 10 Jan 2011 18:30:28 +0000

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!

howcome — Mon, 10 Jan 2011 18:20:54 +0000

Using 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

howcome — Mon, 10 Jan 2011 18:19:52 +0000

Using 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

howcome — Mon, 10 Jan 2011 18:18:32 +0000

In 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

howcome — Mon, 10 Jan 2011 18:16:02 +0000

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.

Using Gentium as web fonts

howcome — Wed, 28 Apr 2010 21:29:00 +0000

Gentium is a beautiful font with an unusually wide range of characters. It has been developed by SIL and released under a liberal license. Therefore, it’s an ideal webfont which Prince can put to good use. In this sample document (HTML, CSS, PDF), we replace the main heading with another string by way of the ‘content’ property in CSS. The replacement is nonsensical in the sense that the glyphs have been borrowed from different scripts. But it looks neat!