Benjamin Lu

everyday is cool

Printing an Article with CSS

The navigation that helps you move around a website can take up valuable space on a printed page. Try making a print stylesheet for an article without changing the screen layout.

@media print {
  .site-menu, .sidebar {
    display: none;
  }

  body {
    color: black;
    background: white;
  }

  .article {
    width: auto;
    margin: 0;
  }
}

Use print preview first. Check that the headline and article still appear, that long lines fit the page, and that no essential information was hidden with the sidebar. If you applied the same class to a block that contains both navigation and useful article links, narrow the rule so it only hides the part you intend.

Then preview a second article with a large image. A rule that saves space on a text-only page is only part of the job if images still push content past the paper edge.