Project: card-print-css

There are two things I like a lot: small, well contained tools and things that live in deck boxes. Today's project is one that combines both of these.

For an effective use of this project, a couple of things are needed: a computer, images in portrait 5:7 aspect ratio, card sleeves, 2.5" x 3.5" cards that you have no longer use for, a printer and printing paper:

hamatti/card-print-css is a project that makes it easy to print out 2.5" x 3.5" cards that fit standard card sleeves. I use it for rapid prototyping when I'm attempting to design a board game, testing out print-and-play games before committing to order actual prints or when play testing different Pokemon TCG decks before purchasing the tournament legal cards. In the picture above, you see a Dark Dragonite card printed on a paper from my most recent testing.

What card-print-css actually is, is a single CSS file that formats <img> tags to fit on a page so that when printed on an A4 paper, they will be a good fit for these sleeves. The pictures are slightly smaller than a full card to make it easier to fit with a card (for rapid prototyping of hundreds of cards, it's a blessing).

The images need to be in 5:7 aspect ratio in portrait mode and that's pretty much all you need. A single sheet of A4 fits 9 cards.

My workflow is to create the images of the cards, store them all in a folder and then write a small script to turn those filenames into <img> tags in an HTML page, add card-print-css and start printing. Cutting cards from paper and sleeving them is surprisingly therapeutic.

This CSS should only be used for pages where you intend to print these card images for sleeving. It uses a lot of !important to make sure accidentally forgotten other CSS doesn't ruin the process.