Styling for print media

Published: · Last updated:

Estimated Reading Time: 3 minutes

The @media is mostly known these days for its use with responsive design in a conditional structure. However, it has been for a very long time. It has been used to separate visual CSS from paged CSS. The different media consists screen, print, projector, audio (formerly aural).

I needed to do a print design in one of my recent projects and I knew I could just make a stylesheet link with a media=“print”. I’ve also been privy that I can use  @media print{} to wrap it but that wasn’t all it took. I never really knew there was more to it but I took the search to see how it’s been done by the leaders of the industry. Not too long after, I stumbled upon the following alistapart article by Eric Meyer from 2002.

The article really pointed out a lot of things I had thought I will have to implement while designing my print stylesheet. Fortunately, I happen to be using the awesome compass.

From the beginning of my styles. I already had the following print.sass file predefined for me

/* Print Styles */
@media print
    background: transparent !important
    color: #000 !important
    box-shadow: none !important
    text-shadow: none !important
    text-decoration: underline
      text-decoration: underline
      content: " (" attr(href) ")"
    content: " (" attr(title) ")"
  /* Don't show links for images, or javascript/internal links */
  .ir a:after
    content: ""
    &[href^="javascript:"]:after, &[href^="#"]:after
      content: ""
  pre, blockquote
    border: 1px solid #999
    page-break-inside: avoid
    display: table-header-group
    page-break-inside: avoid
    page-break-inside: avoid
    max-width: 100% !important
    margin: 0.5cm

  p, h2, h3
    orphans: 3
    widows: 3
  h2, h3
    page-break-after: avoid

If you checked out the Eric Mayer’s link on alistapart above, you’d find out most of what he explained here.

prefixing links with a parentheses containing their link reference seems like a really good way to show on the printed versions where that link references to.

They also avoided page breaks inside certain elements. This really set the pace for me to go on and add my other print styles.


At a point I had to inspect element and know where a padding was coming from. Meanwhile, all I had was my chrome print preview. Not too long after, I discovered the emulation feature in my chromium.

Once the CSS media is checked, and the print is selected from the combo box, the web page renders the print version. Sometimes it’s still not exactly as the chrome print preview but it’s really close. This helps for major debugs when trying to remove style rules made by the all media stylesheet.

0 twitter likes