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.
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.