On this article, we overview the artwork of making printer-friendly net pages with CSS.

Why Do We Want CSS for Printing?

“Who prints net pages?” I hear you cry! Comparatively few pages will ever be reproduced on paper. However think about:

printing journey or live performance tickets
reproducing route instructions or timetables
saving a duplicate for offline studying
accessing data in an space with poor connectivity
utilizing knowledge in harmful or soiled situations — for instance, a kitchen or manufacturing facility
outputting draft content material for written annotations
printing net receipts for bookkeeping functions
offering paperwork to these with disabilities who discover it troublesome to make use of a display
printing a web page on your colleague who refuses to make use of this newfangled t’internet nonsense.

Sadly, printing pages could be a irritating expertise:

textual content might be too small, too massive, or too faint
columns might be too slim, too large, or overflow web page margins
sections could also be cropped or disappear totally
ink is wasted on pointless coloured backgrounds and pictures
hyperlink URLs can’t be seen
icons, menus, and ads are printed which may by no means be clicked!

Many builders advocate net accessibility, but few bear in mind to make the printed net accessible!

Changing responsive, steady media to paged paper of any dimension and orientation might be difficult. Nonetheless, CSS print management has been attainable for a few years, and a fundamental model sheet might be accomplished inside hours. The next sections describe well-supported and sensible choices for making your pages printer-friendly.

Print Fashion Sheets

Print CSS can both be:

Utilized along with display styling. Taking your display kinds as a base, the printer kinds override these defaults as mandatory.
Utilized as separate kinds. The display and print kinds are totally separate; each begin from the browser’s default kinds.

The selection will rely in your website/app. Personally, I take advantage of display kinds as a print base more often than not. Nonetheless, I’ve used separate model sheets for functions with radically completely different outputs — corresponding to a convention session reserving system which displayed a timetable grid on-screen however a chronological schedule on paper.

A print model sheet might be added to the HTML <head> after the usual model sheet:

<hyperlink rel="stylesheet" href="primary.css" />
<hyperlink rel="stylesheet" media="print" href="print.css" />

The print.css kinds shall be utilized in addition to display kinds when the web page is printed.

To separate display and print media, primary.css ought to goal the display solely:

<hyperlink rel="stylesheet" media="display" href="primary.css" />
<hyperlink rel="stylesheet" media="print" href="print.css" />

Alternatively, print kinds might be included inside an current CSS file utilizing @media guidelines. For instance:


physique {
  margin: 2em;
  shade: #fff;
  background-color: #000;
}


@media print {

  physique {
    margin: 0;
    shade: #000;
    background-color: #fff;
  }

}

Any variety of @media print guidelines might be added, so this can be sensible for conserving related kinds collectively. Display screen and print guidelines will also be separated if mandatory:




@media display {

  physique {
    margin: 2em;
    shade: #fff;
    background-color: #000;
  }

}


@media print {

  physique {
    margin: 0;
    shade: #000;
    background-color: #fff;
  }

}

Testing Printer Output

It’s not essential to kill timber and use outrageously costly ink each time you wish to check your print format! The next choices replicate print kinds on-screen.

Print Preview

Probably the most dependable choice is the print preview choice in your browser. This reveals how web page breaks shall be dealt with utilizing your default paper dimension.

Alternatively, you could possibly save or preview the web page by exporting to a PDF.

Developer Instruments

The DevTools (F12 or Cmd/Ctrl + Shift + I) can emulate print kinds, though web page breaks gained’t be proven.

In Chrome, open the Developer Instruments and choose Extra Instruments, then Rendering from the three-dot icon menu on the prime proper. Change the Emulate CSS Media to print on the backside of that panel.

In Firefox, open the Developer Instruments and click on the Toggle print media simulation icon on the Inspector tab’s model pane:

Firefox print preview mode

Hack Your Media Attribute

Presuming you’re utilizing a <hyperlink> tag to load printer CSS, you would quickly change the media attribute to display:

<hyperlink rel="stylesheet" href="primary.css" />
<hyperlink rel="stylesheet" media="display" href="print.css" />

Once more, this gained’t reveal web page breaks. Don’t overlook to revive the attribute to media="print" when you end testing.

Take away Pointless Sections

Earlier than doing the rest, take away and collapse redundant content material with show: none;. Typical pointless sections on paper may embrace navigation menus, hero photos, headers, footers, kinds, sidebars, social media widgets, and promoting blocks (normally something in an iframe):


header, footer, apart, nav, kind, iframe, .menu, .hero, .adslot {
  show: none;
}

It might be mandatory to make use of show: none !essential; if CSS or JavaScript performance is exhibiting parts in line with specific UI states. Utilizing !essential isn’t usually really helpful, however we are able to justify its use in a fundamental set of printer kinds which override display defaults.

Linearize the Structure

It pains me to say this, however Flexbox and Grid not often play properly with printer layouts in any browser. If you happen to encounter points, think about using show: block; or comparable on format containers and regulate dimensions as mandatory. For instance, set width: 100%; to span the complete web page width.

Printer Styling

Printer-friendly styling can now be utilized. Suggestions:

make sure you use darkish textual content on a white background
think about using a serif font, which can be simpler to learn
regulate the textual content dimension to 12pt or greater
modify paddings and margins the place mandatory. Customary cm, mm, or in items could also be extra sensible.

Additional recommendations embrace …

Undertake CSS Columns

Customary A4 and US Letter paper may end up in longer and fewer readable strains of textual content. Think about using CSS columns in print layouts. For instance:


article {
  column-width: 17em;
  column-gap: 3em;
}

On this instance, columns shall be created when there’s a minimum of 37em of horizontal house. There’s no have to set media queries; further columns shall be added on wider paper.

Use Borders As an alternative of Background Colours

Your template might have sections or call-out containers denoted by darker or inverse shade schemes:

callout box on-screen

Save ink by representing these parts with a border:

Take away or Invert Pictures

Customers won’t wish to print ornamental and non-essential photos and backgrounds. You may think about a default the place all photos are hidden until they’ve a print class:


* {
  background-image: none !essential;
}

img, svg {
  show: none !essential;
}

img.print, svg.print {
  show: block;
  max-width: 100%;
}

Ideally, printed photos ought to use darkish colours on a lightweight background. It might be attainable to vary HTML-embedded SVG colours in CSS, however there shall be conditions the place you will have darker bitmaps:

dark chart

A CSS filter can be utilized to invert and regulate colours within the print model sheet. For instance:


img.darkish {
  filter: invert(100%) hue-rotate(180deg) brightness(120%) distinction(150%);
}

The end result:

light chart

Add Supplementary Content material

Printed media typically requires further data which might not be mandatory on-screen. The CSS content property might be employed to append textual content to ::earlier than and ::after pseudo-elements. For instance, show a hyperlink’s URL in brackets after the textual content:


a::after {
  content material: " (" attr(href) ")";
}

Or you may add print-only messages:


primary::after {
  content material: "Copyright website.com";
  show: block;
  text-align: heart;
}

For extra complicated conditions, think about using a category corresponding to print on parts which ought to solely be seen when printed,. For instance:

<p class="print">Article printed at 1:23pm 5 September 2020. Please see https://website.com/web page for the newest model.</p>

The CSS:


.print {
  show: none;
}

@media print {

  
  .print {
    show: block;
  }

}

Observe: most browsers show the URL and present date/time on the printed web page’s header and/or footer, so there’s not often a have to generate this data in code.

Web page Breaks

The CSS3 properties break-before and break-after enable you management how web page, column, or area breaks behave earlier than and after a component. Support is excellent, however older browsers might use the same page-break-before and page-break-after properties.

The next break-before and break-after values can be utilized:

auto: the default — a break is permitted however not compelled
keep away from: keep away from a break on the web page, column or area
avoid-page: keep away from a web page break
web page: pressure a web page break
at all times: an alias of web page
left: pressure web page breaks so the subsequent is a left web page
proper: pressure web page breaks so the subsequent is a proper web page

Instance: pressure a web page break instantly previous to any <h1> heading:


h1 {
  break-before: at all times;
}

Observe: be cautious of over-using web page breaks. Ideally, printer output ought to use as few pages as attainable.

The break-inside (and older page-break-inside) property specifies whether or not a web page break is permitted inside a component. The generally supported values:

auto: the default — a break is permitted however not compelled
keep away from: keep away from an inside break the place attainable
avoid-page: keep away from an inside web page break the place attainable

This may be preferable to specifying web page breaks, since you should utilize as little paper as attainable whereas avoiding web page breaks inside grouped knowledge corresponding to tables or photos:


desk, img, svg {
  break-inside: keep away from;
}

The widows property specifies the minimal variety of strains in a block that should be proven on the prime of a web page. Think about a block with 5 strains of textual content. The browser desires to make a web page break after line 4 so the final line seems on the prime of the subsequent web page. Setting widows: 3; breaks on or earlier than line two so a minimum of three strains carry over to the subsequent web page.

The orphans property is just like widows besides it controls the minimal variety of strains to point out on the backside of a web page.

The box-decoration-break property controls ingredient borders throughout pages. When a component with a border has an inside web page break:

slice: the default, splits the format. The highest border is proven on the primary web page and the underside border is proven on the second web page.
clone: replicates the margin, padding, and border. All 4 borders are proven on each pages.

Lastly, CSS Paged Media (@page) has limited browser support however gives a solution to goal particular pages so various margins or breaks might be outlined:




@web page {
  margin: 2cm;
}


@web page :first {
  margin-top: 6cm;
}


@web page :left {
  margin-right: 4cm;
}


@web page :proper {
  margin-left: 4cm;
}

The CSS web page break properties might be positioned inside your display or print kinds as a result of they solely have an effect on printing, however I like to recommend utilizing them in print CSS for readability.

Bear in mind that web page break management is little greater than a suggestion to the browser. There’s no assure a break shall be compelled or prevented as a result of format is restricted to the confines of the paper.

Printing Pains

Management over printing net media will at all times be restricted, and outcomes can fluctuate throughout browsers. That stated:

printer-friendly model sheets might be retro-fitted to any website
most printer styling will work within the majority of browsers
print kinds won’t have an effect on or break current performance
the event prices are minimal.

Including a couple of web page breaks and eradicating pointless sections will delight customers and lift your website above rivals. Add it to your to-do listing!

For extra superior CSS data, learn our e-book CSS Master, 3rd Edition.

FAQs About Creating Printer-friendly Pages with CSS

Making a CSS print stylesheet is essential for controlling the looks of net pages once they’re printed. Let’s finish by masking among the incessantly requested questions on how one can create printer-friendly pages with CSS.

What’s CSS for print?

It’s attainable to print net pages instantly out of your browser, however a printed net web page typically gained’t seem like the web page you see on the display. Internet pages are styled with CSS, and CSS will also be used to supply styling for the printed web page. Nonetheless, net web page kinds don’t normally translate nicely to print, so it’s essential to write down CSS kinds particularly for the printed web page. CSS for print is a set of kinds particularly designed to assist printers format the format of the printed web page.

How can I take advantage of CSS for print?

Internet web page CSS will routinely apply to the printed model of an internet web page, however typically with sudden or undesirable outcomes. CSS for print acknowledges the distinctive constraints of the printed web page, in distinction to the extra versatile browser surroundings. Setting kinds for print entails excited about how parts will finest lay out on a printed web page. That will embrace hiding parts that aren’t related to print, corresponding to menus and the like, styling hyperlinks in a approach that makes the URL is seen on the printed web page, and eradicating background photos and font colours that is probably not related to a printed model of the online web page.

How do I arrange a CSS print stylesheet?

There are two fundamental methods to serve up print kinds in CSS: by way of a separate stylesheet, or by way of a media question. CSS print kinds might be saved in a separate stylesheet that’s linked to an internet web page within the <head> part of the doc:

<hyperlink rel="stylesheet" media="print" href="print.css" />

CSS print kinds might be positioned inside a stylesheet, together with kinds for different media, by way of media queries:

What are some frequent use instances for print stylesheets?

Frequent use instances for print stylesheets embrace:

Adjusting font sizes and kinds for readability on paper.
Eradicating or hiding sure parts that aren’t related when printed (corresponding to navigation menus).
Guaranteeing that photos and background colours don’t print by default.
Specifying web page breaks to manage how content material is split throughout pages.

How can I cover particular parts within the print model?

You’ll be able to cover particular parts within the print model utilizing CSS by setting the show property to none. For instance:

@media print {
    .hide-on-print {
      show: none;
    }
  }

How do I specify web page breaks in a print stylesheet?

You’ll be able to specify web page breaks utilizing the page-break-before and page-break-after CSS properties. For instance:

@media print {
  .page-break {
    page-break-before: at all times;
  }
}

Can I alter the web page margins for printed paperwork?

Sure, you may change the web page margins for printed paperwork utilizing the @web page rule in your print stylesheet. For instance:

How can I make sure that photos and background colours don’t print?

You’ll be able to stop photos and background colours from printing by utilizing CSS properties like background-image and background-color with the none worth in your print stylesheet. For instance:

@media print {
  img {
    show: none;
  }

physique {
    background-color: white;
  }
}

Is it attainable to vary the font shapes and sizes for printing?

Sure, you may change font shapes and sizes for printing by specifying completely different kinds inside your print stylesheet. For instance:

@media print {
  physique {
    font-size: 12pt;
    font-family: Arial, sans-serif;
  }
}

How do I check my print stylesheet earlier than printing?

You’ll be able to check your print stylesheet by utilizing your net browser’s print preview characteristic. Most trendy browsers can help you see how the web page will look when printed with out truly printing it.

How to Create Printer-friendly Pages with CSS