In today's digital age, printing web pages is often an overlooked aspect of web design. While the primary interaction with web pages occurs electronically, there are situations where printing is necessary. Whether it's printing invoices, articles, or any other content, properly setting up CSS for printing ensures that the output on paper is legible, professional, and useful. In this article, we'll focus on how to correctly set up CSS for printing to achieve the best possible results.

Basic Principles of CSS for Printing

When creating CSS styles for printing, it's crucial to understand that the goal is to maximize the readability and usefulness of the printed material. This means removing any elements that are unnecessary on paper (such as navigation menus, ads) and focusing on the main content.

1. Create a Separate CSS File for Printing

First, it's recommended to create a separate CSS file dedicated exclusively to printing. This approach facilitates style management and maintenance. You can then include it in the HTML document as follows:

<link rel="stylesheet" type="text/css" href="/print.css" media="print">

The media="print" attribute ensures that this style is applied only when printing the page.

2. Optimize Layout for Printing

When preparing the layout for printing, it's essential to consider the width of the page. Most web content is designed for display on widescreen monitors, but paper has different proportions. Adjust the content width to match the standard paper width while leaving sufficient margins for better readability.

@media print {
  body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12pt;
  }
}

3. Hide Unwanted Elements

Some elements that are useful on screen may be unnecessary when printing. Use CSS to hide them:

@media print {
  .navigation, .advertisement, .footer {
    display: none;
  }
}

4. Adjust Fonts and Colors

For printed content, prefer darker fonts on a light background, which enhances contrast and readability. Colorful images and backgrounds may pose challenges for black and white printers, so it's often better to use a grayscale palette.

@media print {
  body {
    color: #000;
    background: #fff;
  }
  a, a:visited {
    text-decoration: underline;
    color: #000;
  }
}

5. Display URL Addresses

For links, it may be useful to display the full URL addresses to make them accessible in printed form:

@media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

Using Page Breaks

Proper use of page breaks can significantly improve the readability of printed documents. The CSS property page-break-before or page-break-after allows you to control where the printer should start a new page.

@media print {
  .chapter {
    page-break-before: always;
  }
}

Properly setting up CSS for printing involves considering the specifics of the printed media and adjusting the style and layout of the content to be as useful and readable as possible in printed form. With the help of CSS media queries and specific print properties, excellent results can be achieved, ensuring that your web pages look great both on screen and on paper.