Skip to content

Instantly share code, notes, and snippets.

@dermotmcguire

dermotmcguire/A4 CSS page template.markdown

Created September 14, 2015 08:48
Show Gist options
  • Save dermotmcguire/97c4f7ec26411add138c to your computer and use it in GitHub Desktop.
Save dermotmcguire/97c4f7ec26411add138c to your computer and use it in GitHub Desktop.
Download ZIP
A4 CSS page template
Raw
A4 CSS page template.markdown
Raw
index.html
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
border: 1.25cm solid #000;
}
@media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
@frozenade
Copy link

frozenade commented Mar 1, 2022 •
edited
Loading

how to break the content to the next page automatically?

@rafaelsanchezrd
Copy link

Nice template,
is there a way to add a header and footer on each page?

@ahm3000
Copy link

ahm3000 commented Oct 9, 2022

when print this layout . Is it printed perfect ?

@tfiers
Copy link

tfiers commented Dec 24, 2022

Great stuff, thanks for the links as well.

Just a note that <page> is not a 'real' html tag, and might be better replaced with a div: https://stackoverflow.com/questions/37196261/html-what-is-the-page-tag-doing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment