Print Styles

We love to have sites that render our content beautifully on every device, but often the lonely ol’ printer is forgotten.

This snippet provides you with some basic styling that

  • Puts a page break in for every <section>
  • Sets a margin around the content on the paper
  • Sets any code block sto have page breaks after them
  • splits any words that would usually run off the page (think long URLs)
  • Takes any <a> link URL and adds the URL after the link title
@media print {
  section { display: block; page-break-before: always; }
  pre code {page-break-after: always;}
  @page {
margin: 0.5cm;
p a, code, pre {
word-wrap: break-word;
img {display:none;}

pre a[href]:after {
    content: ""; }

pre abbr[title]:after {
    content: ""; }

pre   .ir a:after,
  pre a[href^="javascript:"]:after,
  pre a[href^="#"]:after {
    content: ""; }
a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
.no-print {display:none;}


Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.