Skip to content

Instantly share code, notes, and snippets.

@hubgit

hubgit/README.md

Last active March 23, 2024 19:12
Show Gist options
  • Save hubgit/7025107 to your computer and use it in GitHub Desktop.
Save hubgit/7025107 to your computer and use it in GitHub Desktop.
Download ZIP
A5 printed card with HTML + CSS
Raw
README.md
  1. Clone this Gist.
  2. For card sizes other than A5, edit the size value in @page, and the height and width properties of body.
  3. Add contents to each face. The simplest approach is to add an image called front.png of the same dimensions as the card.
  4. Generate a PDF from the HTML + CSS. If using Prince, it's as simple as prince index.html card.pdf.
  5. Take the PDF to a printer, and ask them to print as many copies as you need.
Raw
card.css
@page {
/* dimensions for the whole page */
size: A5;
margin: 0;
}
html {
/* off-white, so body edge is visible in browser */
background: #eee;
}
body {
/* A5 dimensions */
height: 210mm;
width: 148.5mm;
margin: 0;
}
/* fill half the height with each face */
.face {
height: 50%;
width: 100%;
position: relative;
}
/* the back face */
.face-back {
background: #f6f6f6;
}
/* the front face */
.face-front {
background: #fff;
}
/* an image that fills the whole of the front face */
.face-front img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<link rel="stylesheet" href="card.css">
<body>
<div class="face face-back"></div>
<div class="face face-front"><img src="front.png"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment