Skip to content

Instantly share code, notes, and snippets.

@andreasvirkus
Last active March 17, 2018 06:02
Show Gist options
  • Save andreasvirkus/743467a8874105a8d069b578c3e01e02 to your computer and use it in GitHub Desktop.
Save andreasvirkus/743467a8874105a8d069b578c3e01e02 to your computer and use it in GitHub Desktop.
A decent boilerplate for print CSS
/* TODO: Add support for page, chapter and figure counters */
/* Built with the help of https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ */
@media print {
main {
width: 100%;
margin: 0;
}
@page { margin: 2cm }
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}
h1 { font-size: 24pt }
h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}
h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid;
}
a,
blockquote { page-break-inside: avoid }
img {
page-break-inside:avoid;
page-break-after:avoid;
}
table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}
a[href^=http]:after {
content: " <" attr(href) "> ";
}
article a[href^="#"]:after {
content: "";
}
a:not(:local-link):after {
content:" <" attr(href) "> ";
}
iframe, ins {
display: none;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
line-height: 0pt !important;
white-space: nowrap;
}
nav, aside {
display: none;
}
body > header:before,
body > footer:before {
content: "Optional thank you note?";
color: #777 !important;
font-size: 1em;
padding-top: 30px;
text-align: center !important;
}
p, address, li, dt, dd, blockquote {
font-size: 100%
}
code, pre { font-family: mono }
ul, ol {
list-style: square; margin-left: 18pt;
margin-bottom: 20pt;
}
li {
line-height: 1.6em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment