πŸ’‘ 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 β€’ Read time 6 min read
Learn how you can use the print media to format pages for print in CSS and create legible pages.
  • twitter
  • facebook
CSS

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.


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:

Copied to clipboard! Playground
<!-- 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

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 CSSinfo Remove ads

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:

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

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

πŸ” 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:

Copied to clipboard! Playground
@page :first { 
   margin-top: 4cm;
}

@page :left { ... }
@page :right { ... }
Target individual pages in CSS
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:

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

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.


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:

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

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:

Copied to clipboard! Playground
h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
}

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

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:

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

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:

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

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 CSSinfo Remove ads

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:

Copied to clipboard! Playground
/* In your default CSS: */
.print {
    display: none;
}

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

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.

πŸ” 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
  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.