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.
There’s a couple of things that it’s easy to forget about HTML:
CSS includes a whole bunch of physical units, like mm and pt. As web designers, these are verboten because (a) they’re absolute units, and are consequently less-than-accessible; and (b) a 10mm square box in the stylesheet almost certainly won’t be 10mm square on screen. But — and this is the key point — it will be on paper.
Changing the size of a graphic using HTML or CSS often looks like ass on screen, because browsers generally aren’t as adept at resizing images as, say, Photoshop. But, as this venerable A List Apart article shows, scaling down a hi-res image in the CSS just ups the DPI in print.
Browsers normally won’t print background images. But they will print a foreground image that’s had text overlaid using absolute positioning.
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.