πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Format Pages for Print in CSS

How to Format Pages for Print in CSS

Using the print media type
Ferenc Almasi β€’ 2023 August 10 β€’ πŸ“– 6 min read

While optimizing for print on the web is rarely a requested change, several cases can arise where you'd need to print a website. Consider printing travel and concert tickets, saving pages for offline reading, or printing pages for students for an offline lecture.

In this tutorial, we'll examine how you can format pages for print in CSS using two different solutions. We'll also explore key considerations when working with print formats.

Looking to improve your skills? Master CSS from start to finish.
Master CSS

How to Target Print in CSS

To target print in CSS, we have two solutions: either we can use an external stylesheet with a media attribute set to print (preferred), or we can use the @media print CSS at-rule:

<!-- Target via media="print" -->
<link rel="stylesheet" media="print" href="./print.css" />

<!-- Target via @media print at-rule -->
<style>
    @media print { ... }
</style>
How to target print in CSS
Copied to clipboard!

For better separation of print-specific styles from the rest of your CSS, it's advisable to use the first option and define it in a completely separate stylesheet. Within this stylesheet, you don't need to use the @media print at-rule, as the stylesheet will only be applied for print formats.


How to Test Print Layout

The most reliable way to test print layouts is to check the print preview using the "Print..." option. Right-click on the page that you'd like to test, and select the "Print..." option. This will show you a print preview, allowing you to verify your changes.

How to emulate CSS media type in DevTools
How to reach the "Emulate CSS media type" option in DevTools

An alternative option is to emulate the CSS media type using DevTools. With your DevTools open, press ctrl + shift + p, and search for "Render" to open the "Rendering" panel.

Alternatively, click on the three dots and find the "Rendering" panel under "More tools".

Within the panel, locate the "Emulate CSS media type" option, and change the setting from "No emulation" to "print". This will enforce the page to use your print CSS. You can use this option to make quick changes and then confirm them in the print preview using the first option.

Looking to improve your skills? Master CSS from start to finish.
Master CSS

How to Style the Page

To style entire printed pages collectively, we can use the @page at-rule. This can be used to target and modify the size and orientation of pages, as well as adjust the layout of individual pages.

For instance, to define the size and add extra margins on both sides, you can use the following set of rules:

@page {
    size: A4 landscape;
    margin-left: 4cm;
    margin-right: 4cm;
}
Style printed pages in CSS
Copied to clipboard!

This code will set the page size as A4 with a landscape orientation, and apply a 4cm margin to both sides.

πŸ” Become a member or login to get access to the full source code in one piece. Download the print preset in full to improve your prints.

We can also specifically target the first page using the :first pseudo-selector. Additionally, we can individually target left (even-numbered) or right (odd-numbered) pages using the :left and :right pseudo-selectors:

@page :first { 
   margin-top: 4cm;
}

@page :left { ... }
@page :right { ... }
Target individual pages in CSS
Copied to clipboard!
margins set on print with CSS
The layout of the first page after setting the rules

Remove Visuals

When dealing with prints, there are a couple of best practices to keep in mind. Firstly, it's recommended to remove visual elements that contribute unnecessary clutter to printed pages.

Elements like navigation menus, footers, and sidebars tend to clutter printed media. Remove them using a display: none rule:

header, footer, aside, nav, form, iframe, .ad {
    display: none;
}
Remove noise from printed pages
Copied to clipboard!

Include any elements here that you want to exclude from the printed version of the page. For example, forms or iframes. Ads are also common elements to exclude when printing a page.

If stronger CSS rules override your print CSS, it's okay to use !important.

Looking to improve your skills? Master CSS from start to finish.
Master CSS

Improve Readability

You also want to ensure that the document is legible. Always use a font size of 12pt or larger. To save resources, turn dark themes into light, and light text to dark. This can be achieved with simple reset rules:

body {
    background: #FFF;
    color: #000;
    font-size: 12pt;
    padding: 0;
}
Improve legibility
Copied to clipboard!

You can also introduce page breaks as needed. CSS provides the following three rules for handling page breaks:

  • page-break-before: Specifies a page break before the element.
  • page-break-after: Specifies a page break after the element.
  • page-break-inside: Specifies a page break inside the element.

Generally, avoid page breaks immediately after headings and avoid breaking up elements like tables or images. To ensure proper printing, you can add the following rules to your print.css:

h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
}

table, figure, img, svg {
    page-break-inside: avoid;
}
Avoid page breaks on elements
Copied to clipboard!

Optionally, you might want to introduce page breaks before any h1 heading to start new sections on new pages. To achieve this, simply add a page-break-before: always rule to h1 elements.

To improve the readability of tables, make sure to reset their styles and add a 1px border around the cells. Don't forget to set border-collapse to collapse to avoid double borders:

table, th, td {
    border: 1px solid;
    border-collapse: collapse;
    text-align: left;
    padding: 5px 10px;;
}
Improve readability of tables
Copied to clipboard!

Links are another critical part of printed media. To prevent readers from wondering where specific links lead, ensure you display the URL after a link. This can be achieved using the ::after selector combined with the attr function:

a::after {
    content: " (" attr(href) ")";
}
Write out links for anchors
Copied to clipboard!

This will grab the href attribute from anchors, and display the full URL in parentheses after the link, making it accessible to offline readers.

Looking to improve your skills? Master CSS from start to finish.
Master CSS

Optionally, you might want to define print-specific content on your site that should only be visible on printed pages. You can do this with a custom CSS class, such as .print, which is set to display: none by default, and then set to display: block in your print.css file:

/* In your default CSS: */
.print {
    display: none;
}

/* In your print.css: */
.print {
    display: block;
}
Define print-only content
Copied to clipboard!

Simply apply the .print class to any element you want to show exclusively on your printed pages. This can include print-specific information like dates, copyright disclaimers, or other useful elements for printed versions.

Depending on your scenario, you might also want to hide non-essential images. If applicable, you can convert dark images to light using filter: invert(1) to save ink.

πŸ” Become a member or login to get access to the full source code in one piece. Download the print preset in full to improve your prints.

Conclusion

In conclusion, there are several ways you can improve the printed layout of your pages. Use @page at-rules to style pages in one go. Make sure you keep the following in mind when applying styles:

  • Remove visual clutter like navigation and footers.
  • Reset styles for legible typography (black on white).
  • Increase font size for improved readability.
  • Prevent element breaks across pages with page-break rules.
  • Include URLs after links.
  • Use print-only content if necessary.

Is there anything missing from this tutorial? Let us know in the comments below! If you would like to learn more about CSS, make sure you check out our other CSS tutorials below. Thank you for reading, happy styling!

CSS Tutorials
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Courses

Recommended