Elements or Lower

Mon, 24 Sep 2007

Using HTML for Print

Over the weekend, we launched our new registry notification cards on Buy Our Honeymoon. For customers in the UK or EU, we send out a set of 100 cards as part of the service. Previously, these had used our logo, URL and a standard message, but we’d wanted to offer customised cards pretty much from the beginning.

One of the key challenges in doing this was finding an easy way to generate the artwork for the cards without having to manually alter a template each time. In some ways, the obvious thing to do would be to generate a PDF — but that’s not easy at all. Have you seen XSL-FO?

Instead we decided to use a non-obvious choice: HTML. And it worked beautifully.

A cluster of registry cards

There’s a couple of things that it’s easy to forget about HTML:

Was the resulting file fit for use on the web? Was it accessible? No — but that wasn’t the plan. The plan was to load it into Safari and print it using a very high-quality laser printer onto some nice thick card. It’s HTML, but it’s not a web page.

Why Safari? Well, for one thing, it’s the browser I use on a daily basis — but, crucially, you can also set it to miss out the normal printed headers and footers (such as the page URL), so you’re left with the content and nothing else.

So, having set up a sample file, it just needed some experiments to get the page margins correct. And then a workaround for the discovery that Safari seemed to miscalculate some of our mm box sizes by 3mm. I have no idea if Safari 3 fixes this — but if it does, it’s just an adjustment to the stylesheet.