On this article, we evaluate the artwork of making printer-friendly internet pages with CSS.
Why Do We Want CSS for Printing?
“Who prints internet 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 replica for offline studying
- accessing info in an space with poor connectivity
- utilizing information in harmful or soiled situations — for instance, a kitchen or manufacturing facility
- outputting draft content material for written annotations
- printing internet receipts for bookkeeping functions
- offering paperwork to these with disabilities who discover it tough to make use of a display
- printing a web page to your colleague who refuses to make use of this newfangled t’web nonsense.
Sadly, printing pages generally is a irritating expertise:
- textual content will be too small, too giant, or too faint
- columns will be too slender, too extensive, or overflow web page margins
- sections could also be cropped or disappear completely
- ink is wasted on pointless coloured backgrounds and pictures
- hyperlink URLs can’t be seen
- icons, menus, and ads are printed which might by no means be clicked!
Many builders advocate internet accessibility, but few keep in mind to make the printed internet accessible!
Changing responsive, steady media to paged paper of any dimension and orientation will be difficult. Nonetheless, CSS print management has been doable for a few years, and a fundamental model sheet will be accomplished inside hours. The next sections describe well-supported and sensible choices for making your pages printer-friendly.
Print Type Sheets
Print CSS can both be:
- Utilized along with display styling. Taking your display types as a base, the printer types override these defaults as crucial.
- Utilized as separate types. The display and print types are completely separate; each begin from the browser’s default types.
The selection will rely in your website/app. Personally, I take advantage of display types as a print base more often than not. Nonetheless, I’ve used separate model sheets for functions with radically totally different outputs — reminiscent of a convention session reserving system which displayed a timetable grid on-screen however a chronological schedule on paper.
A print model sheet will be added to the HTML <head> after the usual model sheet:
<hyperlink rel="stylesheet" href="foremost.css" />
<hyperlink rel="stylesheet" media="print" href="print.css" />
The print.css types shall be utilized in addition to display types when the web page is printed.
To separate display and print media, foremost.css ought to goal the display solely:
<hyperlink rel="stylesheet" media="display" href="foremost.css" />
<hyperlink rel="stylesheet" media="print" href="print.css" />
Alternatively, print types will be included inside an current CSS file utilizing @media guidelines. For instance:
physique {
margin: 2em;
colour: #fff;
background-color: #000;
}
@media print {
physique {
margin: 0;
colour: #000;
background-color: #fff;
}
}
Any variety of @media print guidelines will be added, so this can be sensible for preserving related types collectively. Display screen and print guidelines will also be separated if crucial:
@media display {
physique {
margin: 2em;
colour: #fff;
background-color: #000;
}
}
@media print {
physique {
margin: 0;
colour: #000;
background-color: #fff;
}
}
Testing Printer Output
It’s not essential to kill timber and use outrageously costly ink each time you need to check your print structure! The next choices replicate print types on-screen.
Print Preview
Probably the most dependable possibility is the print preview possibility in your browser. This reveals how web page breaks shall be dealt with utilizing your default paper dimension.
Alternatively, you might be able to save or preview the web page by exporting to a PDF.
Developer Instruments
The DevTools (F12 or Cmd/Ctrl + Shift + I) can emulate print types, though web page breaks received’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:
Hack Your Media Attribute
Presuming you’re utilizing a <hyperlink> tag to load printer CSS, you could possibly briefly change the media attribute to display:
<hyperlink rel="stylesheet" href="foremost.css" />
<hyperlink rel="stylesheet" media="display" href="print.css" />
Once more, this received’t reveal web page breaks. Don’t neglect to revive the attribute to media="print" when you end testing.
Take away Pointless Sections
Earlier than doing anything, take away and collapse redundant content material with show: none;. Typical pointless sections on paper might embody navigation menus, hero pictures, headers, footers, types, sidebars, social media widgets, and promoting blocks (normally something in an iframe):
header, footer, apart, nav, kind, iframe, .menu, .hero, .adslot {
show: none;
}
It could be crucial to make use of show: none !necessary; if CSS or JavaScript performance is exhibiting components in keeping with explicit UI states. Utilizing !necessary isn’t usually really helpful, however we will justify its use in a fundamental set of printer types which override display defaults.
Linearize the Structure
It pains me to say this, however Flexbox and Grid hardly ever play properly with printer layouts in any browser. For those who encounter points, think about using show: block; or related on structure packing containers and modify dimensions as crucial. 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
- modify the textual content dimension to
12ptor greater - modify paddings and margins the place crucial. Commonplace
cm,mm, orinitems could also be extra sensible.
Additional options embody …
Undertake CSS Columns
Commonplace 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 at the very least 37em of horizontal house. There’s no have to set media queries; further columns shall be added on wider paper.
Use Borders As a substitute of Background Colours
Your template might have sections or call-out packing containers denoted by darker or inverse colour schemes:
Save ink by representing these components with a border:
Take away or Invert Photographs
Customers won’t need to print ornamental and non-essential pictures and backgrounds. You possibly can think about a default the place all pictures are hidden except they’ve a print class:
* {
background-image: none !necessary;
}
img, svg {
show: none !necessary;
}
img.print, svg.print {
show: block;
max-width: 100%;
}
Ideally, printed pictures ought to use darkish colours on a light-weight background. It could be doable to alter HTML-embedded SVG colours in CSS, however there shall be conditions the place you may have darker bitmaps:
A CSS filter can be utilized to invert and modify colours within the print model sheet. For instance:
img.darkish {
filter: invert(100%) hue-rotate(180deg) brightness(120%) distinction(150%);
}
The end result:
Add Supplementary Content material
Printed media typically requires further info which might not be crucial on-screen. The CSS content material property will 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 possibly can add print-only messages:
foremost::after {
content material: "Copyright website.com";
show: block;
text-align: middle;
}
For extra advanced conditions, think about using a category reminiscent of print on components 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 most recent model.</p>
The CSS:
.print {
show: none;
}
@media print {
.print {
show: block;
}
}
Word: most browsers show the URL and present date/time on the printed web page’s header and/or footer, so there’s hardly ever a have to generate this info 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. Help is great, 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 compelledkeep away from: keep away from a break on the web page, column or areaavoid-page: keep away from a web page breakweb page: pressure a web page breakat all times: an alias ofweb pageleft: pressure web page breaks so the following is a left web pageproper: pressure web page breaks so the following is a proper web page
Instance: pressure a web page break instantly previous to any <h1> heading:
h1 {
break-before: at all times;
}
Word: be cautious of over-using web page breaks. Ideally, printer output ought to use as few pages as doable.
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 compelledkeep away from: keep away from an interior break the place doableavoid-page: keep away from an interior web page break the place doable
This may be preferable to specifying web page breaks, since you should use as little paper as doable whereas avoiding web page breaks inside grouped information reminiscent of tables or pictures:
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 following web page. Setting widows: 3; breaks on or earlier than line two so at the very least three strains carry over to the following web page.
The orphans property is much like widows besides it controls the minimal variety of strains to indicate on the backside of a web page.
The box-decoration-break property controls factor borders throughout pages. When a component with a border has an interior web page break:
slice: the default, splits the structure. 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 (@web page) has restricted browser assist however offers a technique to goal particular pages so various margins or breaks will 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 will be positioned inside your display or print types 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 averted as a result of structure is restricted to the confines of the paper.
Printing Pains
Management over printing internet media will at all times be restricted, and outcomes can fluctuate throughout browsers. That mentioned:
- printer-friendly model sheets will be retro-fitted to any website
- most printer styling will work within the majority of browsers
- print types won’t have an effect on or break current performance
- the event prices are minimal.
Including a number 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 Grasp, third Version.
FAQs About Creating Printer-friendly Pages with CSS
Making a CSS print stylesheet is necessary for controlling the looks of internet pages after they’re printed. Let’s finish by masking among the incessantly requested questions on the best way to create printer-friendly pages with CSS.
What’s CSS for print?
It’s doable to print internet pages instantly out of your browser, however a printed internet web page typically received’t appear to be 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, internet web page types don’t normally translate properly to print, so it’s necessary to put in writing CSS types particularly for the printed web page. CSS for print is a set of types particularly designed to assist printers format the structure 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 online web page, however typically with surprising or undesirable outcomes. CSS for print acknowledges the distinctive constraints of the printed web page, in distinction to the extra versatile browser surroundings. Setting types for print includes fascinated by how components will greatest lay out on a printed web page. Which will embody hiding components that aren’t related to print, reminiscent of menus and the like, styling hyperlinks in a method that makes the URL is seen on the printed web page, and eradicating background pictures 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 types in CSS: by way of a separate stylesheet, or by way of a media question. CSS print types will be saved in a separate stylesheet that’s linked to an online web page within the <head> part of the doc:
<hyperlink rel="stylesheet" media="print" href="print.css" />CSS print types will be positioned inside a stylesheet, together with types for different media, by way of media queries:
What are some frequent use circumstances for print stylesheets?
Widespread use circumstances for print stylesheets embody:
- Adjusting font sizes and types for readability on paper.
- Eradicating or hiding sure components that aren’t related when printed (reminiscent of navigation menus).
- Making certain that pictures 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 components within the print model?
You’ll be able to cover particular components 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 possibly can change the web page margins for printed paperwork utilizing the @web page rule in your print stylesheet. For instance:
How can I be sure that pictures and background colours don’t print?
You’ll be able to forestall pictures 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 doable to alter the font shapes and sizes for printing?
Sure, you possibly can change font shapes and sizes for printing by specifying totally different types 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 internet browser’s print preview function. Most fashionable browsers assist you to see how the web page will look when printed with out really printing it.
