Creating printable cards with HTML and CSS

·

On several occasions, I've needed to print a card at a specific size (e.g. A5), divided into two equal halves (front and back), produced using only HTML and CSS (and a PDF conversion).

HTML

The HTML is very simple: a single container for the whole card, with two sections inside - one for the front and one for the back.

CSS

The stylesheet sets the size of the printed page (@page), the dimensions of the container element (in mm), fills the container with two half-sized elements, and (in this case) fills the front face with an image.

PDF

I use Prince to generate a PDF, as it supports CSS Paged Media.

After checking the HTML + CSS in a web browser, run prince index.html card.pdf to produce the PDF file, which can then be taken to a professional printer.