Prince XML is an application that enables you to create PDFs from HTML documents, using formatting from your print stylesheet. This is handy as browsers don’t really do print very well, and don’t support the CSS selectors that create multi-column layouts.
I first heard about Prince XML in a presentation by Håkon Wium Lie of Opera at the @Media 2007 conference. When I looked into Prince after the conference I didn’t really see its potential for us, as PDFs were something we generally avoided.
I was asked recently to do some further research and came across this presentation on YouTube, as a consequence I see its true capabilities.
So why use it?
We have a lot of fresh and accurate content on our website, so why not use web pages as the source for high quality printed material?
If a print style sheet can manage a layout as effectively as QuarkXPress or Adobe InDesign, when outputted in an automated way through Prince, then that saves a lot of extra work.
In the Prince GUI you select the web document you wish to convert, click Go and it creates the PDF, it’s very simple.
Thinking in Print Terms
As a web designer I’ve learnt to avoid print values when using CSS, like millimetres and points in typography, but there is so much more to think about.
If I’m following instructions from a print designer, I need to be able to format columns, page-breaks, pagination, headers, footers, footnotes, crop-marks, not to mention the mysterious widows and orphans.
Also we will be able reference the typefaces in the Edge Hill style guide that we can’t use on the web.
Some print specific CSS examples
Formatting a page:
@page {
size: A4 landscape;
}
Formatting headers and footers with page numbers:
@page{ size: A4 portrait; margin:1cm;
@top{ content:"BA (hons) Film Studies"}
@bottom{ content: counter(page)}
}
Formatting left and right pages:
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
Page breaks before specific headings:
H2{page-break-before:always}
Column layouts:
Body{column-count:2}
RGB and CYMK colours
H1 { color: rgb(255,0,0) }
H1 { color: cmyk(0, 100, 50, 0)}
Font Formatting
h1 { font: 28pt "miso-regular"; text-transform:uppercase; border-bottom:thin solid #336699 }
Finally Does it work?
From the experiments I’ve done it seems to work really well, but I won’t be fully confident until I’ve followed real style guidelines to the letter, and received the thumbs up from an experienced print designer.