Skip to content

Instantly share code, notes, and snippets.

@xemuj

xemuj/README.md

Forked from hubgit/README.md
Created June 13, 2018 19:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xemuj/a4c5f5d19bf5f5737a85aaad62d7486a to your computer and use it in GitHub Desktop.
Save xemuj/a4c5f5d19bf5f5737a85aaad62d7486a 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