{"id":9530,"date":"2022-08-03T20:44:00","date_gmt":"2022-08-03T18:44:00","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=9530"},"modified":"2022-08-03T07:46:13","modified_gmt":"2022-08-03T05:46:13","slug":"how-to-create-printer-friendly-pages-with-css","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2022\/08\/03\/how-to-create-printer-friendly-pages-with-css\/","title":{"rendered":"How to Create Printer-friendly Pages with CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"how-to-create-printer-friendly-pages-with-css\"><a href=\"https:\/\/www.sitepoint.com\/css-printer-friendly-pages\/\">How to Create Printer-friendly Pages with CSS<\/a><\/h2>\n\n\n\n<!--more-->\n\n\n\n<!--nextpage-->\n\n\n<blockquote>\n<h1 class=\"font-bold leading-10 mb-4 mt-1\">How to Create Printer-friendly Pages with CSS<\/h1>\n<p><a class=\"py-1 px-2 mr-2 mb-2 bg-gray-200 text-black hover:text-primary-700 hover:bg-primary-100 font-bold text-sm\" href=\"https:\/\/www.sitepoint.com\/html-css\/css\/\">CSS<\/a><\/p>\n<div class=\"space-y-4 sm:space-y-0 sm:flex sm:justify-between\">\n<div class=\"flex items-center relative\"><a class=\"Header-module--imgContainer--kCdjz z-10\" href=\"https:\/\/www.sitepoint.com\/author\/craig-buckler\/\"><img decoding=\"async\" class=\"Header-module--img--5RBJn\" src=\"https:\/\/secure.gravatar.com\/avatar\/439aeaff7de2bae365adc3eb4947b44d?s=96&amp;#038;d=mm&amp;#038;r=g\" \/><\/a>\n<div class=\"ml-4 mb-0\"><address class=\"not-italic -mb-2\"><a class=\"Header-module--link--MT0OJ\" href=\"https:\/\/www.sitepoint.com\/author\/craig-buckler\/\">Craig Buckler<\/a><\/address><time class=\"text-sm\" datetime=\"2020-01-05\">January 5, 2020<\/time><\/div>\n<\/div>\n<div class=\"flex items-center\"><span class=\"font-bold mr-2\">Share<\/span><\/div>\n<\/div>\n<div>\n<p><em>This article was updated in 2020 to reflect latest best practices in CSS print styling.<\/em><\/p>\n<p><strong>In this article, we review the art of creating printer-friendly web pages with CSS.<\/strong><\/p>\n<p>\u201cWho prints web pages?\u201d I hear you cry! Relatively few pages will ever be reproduced on paper. But consider:<\/p>\n<ul>\n<li>printing travel or concert tickets<\/li>\n<li>reproducing route directions or timetables<\/li>\n<li>saving a copy for offline reading<\/li>\n<li>accessing information in an area with poor connectivity<\/li>\n<li>using data in dangerous or dirty conditions \u2014 for example, a kitchen or factory<\/li>\n<li>outputting draft content for written annotations<\/li>\n<li>printing web receipts for bookkeeping purposes<\/li>\n<li>providing documents to those with disabilities who find it difficult to use a screen<\/li>\n<li>printing a page for your colleague who refuses to use this newfangled <a href=\"https:\/\/www.urbandictionary.com\/define.php?term=Tinternet\">t\u2019internet<\/a> nonsense.<\/li>\n<\/ul>\n<p>Unfortunately, printing pages can be a frustrating experience:<\/p>\n<ul>\n<li>text can be too small, too large, or too faint<\/li>\n<li>columns can be too narrow, too wide, or overflow page margins<\/li>\n<li>sections may be cropped or disappear entirely<\/li>\n<li>ink is wasted on unnecessary colored backgrounds and images<\/li>\n<li>link URLs can\u2019t be seen<\/li>\n<li>icons, menus, and advertisements are printed which could never be clicked!<\/li>\n<\/ul>\n<p>Many developers advocate web accessibility, yet few remember to make the printed web accessible!<\/p>\n<p>Converting responsive, continuous media to paged paper of any size and orientation can be challenging. However, CSS print control has been possible for many years, and a basic style sheet can be completed within hours. The following sections describe well-supported and practical options for making your pages printer-friendly.<\/p>\n<h2 id=\"printstylesheets\">Print Style Sheets<\/h2>\n<p>Print CSS can either be:<\/p>\n<ol>\n<li><strong>Applied in addition to screen styling.<\/strong> Taking your screen styles as a base, the printer styles override those defaults as necessary.<\/li>\n<li><strong>Applied as separate styles.<\/strong> The screen and print styles are entirely separate; both start from the browser\u2019s default styles.<\/li>\n<\/ol>\n<p>The choice will depend on your site\/app. Personally, I use screen styles as a print base most of the time. However, I have used separate style sheets for applications with radically different outputs \u2014 such as a conference session booking system which displayed a timetable grid on-screen but a chronological schedule on paper.<\/p>\n<p>A print style sheet can be added to the HTML <code class=\"\" data-line=\"\">&lt;head&gt;<\/code> after the standard style sheet:<\/p>\n<pre class=\"language-markup\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;\/span&gt;link &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;main.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\/&gt;&lt;\/span&gt;&lt;\/span&gt;\n&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;\/span&gt;link &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;media&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;print&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;print.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\/&gt;&lt;\/span&gt;&lt;\/span&gt;\n<\/code><\/pre>\n<p>The <code class=\"\" data-line=\"\">print.css<\/code> styles will be applied in <strong>addition<\/strong> to screen styles when the page is printed.<\/p>\n<p>To separate screen and print media, <code class=\"\" data-line=\"\">main.css<\/code> should target the screen only:<\/p>\n<pre class=\"language-markup\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;\/span&gt;link &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;media&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;screen&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;main.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\/&gt;&lt;\/span&gt;&lt;\/span&gt;\n&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;\/span&gt;link &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;media&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;print&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;print.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\/&gt;&lt;\/span&gt;&lt;\/span&gt;\n<\/code><\/pre>\n<p>Alternatively, print styles can be included within an existing CSS file using <code class=\"\" data-line=\"\">@media<\/code> rules. For example:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* main.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;body&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;margin&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;em&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#fff&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;background-color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#000&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token comment&quot;&gt;\/* override styles when printing *\/&lt;\/span&gt;\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;\/span&gt; print&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n\n  &lt;span class=&quot;token selector&quot;&gt;body&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;margin&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#000&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;background-color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#fff&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>Any number of <code class=\"\" data-line=\"\">@media print<\/code> rules can be added, so this may be practical for keeping associated styles together. Screen and print rules can also be separated if necessary:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* main.css *\/&lt;\/span&gt;\n\n&lt;span class=&quot;token comment&quot;&gt;\/* on-screen styles *\/&lt;\/span&gt;\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;\/span&gt; screen&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n\n  &lt;span class=&quot;token selector&quot;&gt;body&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;margin&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;em&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#fff&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;background-color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#000&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token comment&quot;&gt;\/* print styles *\/&lt;\/span&gt;\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;\/span&gt; print&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n\n  &lt;span class=&quot;token selector&quot;&gt;body&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;margin&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;0&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#000&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;background-color&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token hexcode color&quot;&gt;#fff&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_content_1\" class=\"sitepoint_content proper-dynamic-insertion\">\u00a0<\/div>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_dynamic_2\" data-google-query-id=\"CPTAjLH4qfkCFfKW_QcdW5cDOg\">\n<div id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_2_0__container__\"><iframe id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_2_0\" tabindex=\"0\" title=\"3rd party ad content\" role=\"region\" name=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_2_0\" width=\"1\" height=\"1\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" aria-label=\"Advertisement\" data-google-container-id=\"6\" data-load-complete=\"true\" data-mce-fragment=\"1\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"testingprinteroutput\">Testing Printer Output<\/h2>\n<p>It\u2019s not necessary to kill trees and use outrageously expensive ink every time you want to test your print layout! The following options replicate print styles on-screen.<\/p>\n<h3 id=\"printpreview\">Print Preview<\/h3>\n<p>The most reliable option is the print preview option in your browser. This shows how page breaks will be handled using your default paper size.<\/p>\n<p>Alternatively, you may be able to save or preview the page by exporting to a PDF.<\/p>\n<h3 id=\"developertools\">Developer Tools<\/h3>\n<p>The DevTools (<kbd>F12<\/kbd> or <kbd>Cmd\/Ctrl<\/kbd> + <kbd>Shift<\/kbd> + <kbd>I<\/kbd>) can emulate print styles, although page breaks won\u2019t be shown.<\/p>\n<p>In Chrome, open the Developer Tools and select <strong>More Tools<\/strong>, then <strong>Rendering<\/strong> from the three-dot icon menu at the top right. Change the <strong>Emulate CSS Media<\/strong> to <strong>print<\/strong> at the bottom of that panel.<\/p>\n<p>In Firefox, open the Developer Tools and click the <strong>Toggle print media simulation<\/strong> icon on the <strong>Inspector<\/strong> tab\u2019s style pane:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-174518\" src=\"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png?resize=660%2C169&#038;ssl=1\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" srcset=\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox.png 660w, https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925121printer-friendly-css-05-firefox-300x77.png 300w\" alt=\"Firefox print preview mode\" width=\"660\" height=\"169\" \/><\/p>\n<h3 id=\"hackyourmediaattribute\">Hack Your Media Attribute<\/h3>\n<p>Presuming you\u2019re using a <code class=\"\" data-line=\"\">&lt;link&gt;<\/code> tag to load printer CSS, you could temporarily change the <code class=\"\" data-line=\"\">media<\/code> attribute to <code class=\"\" data-line=\"\">screen<\/code>:<\/p>\n<pre class=\"language-markup\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;\/span&gt;link &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;main.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\/&gt;&lt;\/span&gt;&lt;\/span&gt;\n&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;\/span&gt;link &lt;span class=&quot;token attr-name&quot;&gt;rel&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;stylesheet&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;media&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;screen&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;href&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;print.css&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;\/&gt;&lt;\/span&gt;&lt;\/span&gt;\n<\/code><\/pre>\n<p>Again, this won\u2019t reveal page breaks. Don\u2019t forget to restore the attribute to <code class=\"\" data-line=\"\">media=&quot;print&quot;<\/code> once you finish testing.<\/p>\n<div class=\"custom-content\"><a href=\"https:\/\/www.sitepoint.com\/premium\/sign-up\/?ref_medium=free-book\"><img data-recalc-dims=\"1\" height=\"260\" width=\"768\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cdn.sanity.io\/images\/708bnrs8\/production\/45864a398b6f7babdf46d96b8086c013a70956b1-768x260.png?resize=768%2C260&#038;ssl=1\" alt=\"HTML5 Games - Free\" \/><\/a><\/div>\n<h2 id=\"removeunnecessarysections\">Remove Unnecessary Sections<\/h2>\n<p>Before doing anything else, remove and collapse redundant content with <code class=\"\" data-line=\"\">display: none;<\/code>. Typical unnecessary sections on paper could include navigation menus, hero images, headers, footers, forms, sidebars, social media widgets, and advertising blocks (usually anything in an <code class=\"\" data-line=\"\">iframe<\/code>):<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;header&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; footer&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; aside&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; nav&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; form&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; iframe&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; &lt;span class=&quot;token class&quot;&gt;.menu&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; &lt;span class=&quot;token class&quot;&gt;.hero&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; &lt;span class=&quot;token class&quot;&gt;.adslot&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;display&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>It may be necessary to use <code class=\"\" data-line=\"\">display: none !important;<\/code> if CSS or JavaScript functionality is showing elements according to particular UI states. Using <code class=\"\" data-line=\"\">!important<\/code> isn\u2019t normally recommended, but we can justify its use in a basic set of printer styles which override screen defaults.<\/p>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_content_2\" class=\"sitepoint_content proper-dynamic-insertion\">\u00a0<\/div>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_dynamic_3\" data-google-query-id=\"CM3hvb74qfkCFcQx4AodyhMFxA\">\n<div id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_3_0__container__\"><iframe id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_3_0\" tabindex=\"0\" title=\"3rd party ad content\" role=\"region\" name=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_3_0\" width=\"1\" height=\"1\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" aria-label=\"Advertisement\" data-google-container-id=\"7\" data-load-complete=\"true\" data-mce-fragment=\"1\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"linearizethelayout\">Linearize the Layout<\/h2>\n<p>It pains me to say this, but <strong>Flexbox and Grid rarely play nicely with printer layouts<\/strong> in any browser. If you encounter issues, consider using <code class=\"\" data-line=\"\">display: block;<\/code> or similar on layout boxes and adjust dimensions as necessary. For example, set <code class=\"\" data-line=\"\">width: 100%;<\/code> to span the full page width.<\/p>\n<div class=\"custom-content\"><a href=\"https:\/\/www.sitepoint.com\/premium\/sign-up\/?ref_medium=free-book\"><img data-recalc-dims=\"1\" height=\"260\" width=\"768\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cdn.sanity.io\/images\/708bnrs8\/production\/45864a398b6f7babdf46d96b8086c013a70956b1-768x260.png?resize=768%2C260&#038;ssl=1\" alt=\"HTML5 Games - Free\" \/><\/a><\/div>\n<h2 id=\"printerstyling\">Printer Styling<\/h2>\n<p>Printer-friendly styling can now be applied. Recommendations:<\/p>\n<ul>\n<li>ensure you use dark text on a white background<\/li>\n<li>consider using a serif font, which may be easier to read<\/li>\n<li>adjust the text size to <code class=\"\" data-line=\"\">12pt<\/code> or higher<\/li>\n<li>modify paddings and margins where necessary. Standard <code class=\"\" data-line=\"\">cm<\/code>, <code class=\"\" data-line=\"\">mm<\/code>, or <code class=\"\" data-line=\"\">in<\/code> units may be more practical.<\/li>\n<\/ul>\n<p>Further suggestions include \u2026<\/p>\n<h3 id=\"adoptcsscolumns\">Adopt CSS Columns<\/h3>\n<p>Standard A4 and US Letter paper can result in longer and less readable lines of text. Consider using <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_Columns\">CSS columns<\/a> in print layouts. For example:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;article&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;column-width&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;17&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;em&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;column-gap&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;3&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;em&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>In this example, columns will be created when there\u2019s at least <code class=\"\" data-line=\"\">37em<\/code> of horizontal space. There\u2019s no need to set media queries; additional columns will be added on wider paper.<\/p>\n<h3 id=\"usebordersinsteadofbackgroundcolors\">Use Borders Instead of Background Colors<\/h3>\n<p>Your template may have sections or call-out boxes denoted by darker or inverse color schemes:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-174519\" src=\"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925426printer-friendly-css-01-callout1.png?resize=447%2C221&#038;ssl=1\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" srcset=\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925426printer-friendly-css-01-callout1.png 447w, https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925426printer-friendly-css-01-callout1-300x148.png 300w\" alt=\"callout box on-screen\" width=\"447\" height=\"221\" \/><\/p>\n<p>Save ink by representing those elements with a border:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-174520\" src=\"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925462printer-friendly-css-02-callout2.png?resize=447%2C221&#038;ssl=1\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" srcset=\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925462printer-friendly-css-02-callout2.png 447w, https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925462printer-friendly-css-02-callout2-300x148.png 300w\" alt=\"\" width=\"447\" height=\"221\" \/><\/p>\n<h3 id=\"removeorinvertimages\">Remove or Invert Images<\/h3>\n<p>Users will not want to print decorative and non-essential images and backgrounds. You could consider a default where all images are hidden unless they have a <code class=\"\" data-line=\"\">print<\/code> class:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;*&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;background-image&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; none &lt;span class=&quot;token important&quot;&gt;!important&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token selector&quot;&gt;img&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; svg&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;display&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; none &lt;span class=&quot;token important&quot;&gt;!important&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token selector&quot;&gt;img&lt;span class=&quot;token class&quot;&gt;.print&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; svg&lt;span class=&quot;token class&quot;&gt;.print&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;display&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;max-width&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;100&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;%&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>Ideally, printed images should use dark colors on a light background. It may be possible to change HTML-embedded SVG colors in CSS, but there will be situations where you have darker bitmaps:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-174521\" src=\"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925582printer-friendly-css-03-chart1.png?resize=480%2C288&#038;ssl=1\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" srcset=\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925582printer-friendly-css-03-chart1.png 480w, https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925582printer-friendly-css-03-chart1-300x180.png 300w\" alt=\"dark chart\" width=\"480\" height=\"288\" \/><\/p>\n<p>A <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/filter\">CSS filter<\/a> can be used to invert and adjust colors in the print style sheet. For example:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;img&lt;span class=&quot;token class&quot;&gt;.dark&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;filter&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token function&quot;&gt;invert&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;\/span&gt;&lt;span class=&quot;token number&quot;&gt;100&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;%&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;\/span&gt; &lt;span class=&quot;token function&quot;&gt;hue-rotate&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;\/span&gt;&lt;span class=&quot;token number&quot;&gt;180&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;deg&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;\/span&gt; &lt;span class=&quot;token function&quot;&gt;brightness&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;\/span&gt;&lt;span class=&quot;token number&quot;&gt;120&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;%&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;\/span&gt; &lt;span class=&quot;token function&quot;&gt;contrast&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;\/span&gt;&lt;span class=&quot;token number&quot;&gt;150&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;%&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>The result:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-174522\" src=\"https:\/\/i0.wp.com\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925634printer-friendly-css-04-chart2.png?resize=480%2C288&#038;ssl=1\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" srcset=\"https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925634printer-friendly-css-04-chart2.png 480w, https:\/\/uploads.sitepoint.com\/wp-content\/uploads\/2018\/08\/1577925634printer-friendly-css-04-chart2-300x180.png 300w\" alt=\"light chart\" width=\"480\" height=\"288\" \/><\/p>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_content_3\" class=\"sitepoint_content proper-dynamic-insertion\">\u00a0<\/div>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_dynamic_4\" data-google-query-id=\"CIqC9uf4qfkCFdDqdwodFEMJqw\">\n<div id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_4_0__container__\"><iframe id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_4_0\" tabindex=\"0\" title=\"3rd party ad content\" role=\"region\" name=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_4_0\" width=\"1\" height=\"1\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" aria-label=\"Advertisement\" data-google-container-id=\"8\" data-load-complete=\"true\" data-mce-fragment=\"1\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"addsupplementarycontent\">Add Supplementary Content<\/h2>\n<p>Printed media often requires additional information which would not be necessary on-screen. The CSS <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/content\"><code class=\"\" data-line=\"\">content<\/code><\/a> property can be employed to append text to <code class=\"\" data-line=\"\">::before<\/code> and <code class=\"\" data-line=\"\">::after<\/code> pseudo-elements. For example, display a link\u2019s URL in brackets after the text:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;a&lt;span class=&quot;token pseudo-element&quot;&gt;::after&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;content&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot; (&quot;&lt;\/span&gt; &lt;span class=&quot;token function&quot;&gt;attr&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;\/span&gt;href&lt;span class=&quot;token punctuation&quot;&gt;)&lt;\/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;)&quot;&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>Or you can add print-only messages:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;main&lt;span class=&quot;token pseudo-element&quot;&gt;::after&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;content&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;Copyright site.com&quot;&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;display&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;text-align&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>For more complex situations, consider using a class such as <code class=\"\" data-line=\"\">print<\/code> on elements which should only be visible when printed,. For example:<\/p>\n<pre class=\"language-markup\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;&lt;\/span&gt;p &lt;span class=&quot;token attr-name&quot;&gt;class&lt;\/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;print&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;\/span&gt;&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;\/span&gt;&lt;\/span&gt;Article printed at 1:23pm 5 September 2020. Please see https:\/\/site.com\/page for the latest version.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&lt;\/&lt;\/span&gt;p&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;\/span&gt;&lt;\/span&gt;\n<\/code><\/pre>\n<p>The CSS:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* hidden on-screen *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;&lt;span class=&quot;token class&quot;&gt;.print&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;display&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@media&lt;\/span&gt; print&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n\n  &lt;span class=&quot;token comment&quot;&gt;\/* visible when printed *\/&lt;\/span&gt;\n  &lt;span class=&quot;token selector&quot;&gt;&lt;span class=&quot;token class&quot;&gt;.print&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n    &lt;span class=&quot;token property&quot;&gt;display&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n  &lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p><em>Note: most browsers display the URL and current date\/time on the printed page\u2019s header and\/or footer, so there\u2019s rarely a need to generate this information in code.<\/em><\/p>\n<div class=\"custom-content\"><a href=\"https:\/\/www.sitepoint.com\/premium\/sign-up\/?ref_medium=free-book\"><img data-recalc-dims=\"1\" height=\"260\" width=\"768\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cdn.sanity.io\/images\/708bnrs8\/production\/45864a398b6f7babdf46d96b8086c013a70956b1-768x260.png?resize=768%2C260&#038;ssl=1\" alt=\"HTML5 Games - Free\" \/><\/a><\/div>\n<h2 id=\"pagebreaks\">Page Breaks<\/h2>\n<p>The CSS3 properties <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/page-break-before\"><code class=\"\" data-line=\"\">break-before<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/break-after\"><code class=\"\" data-line=\"\">break-after<\/code><\/a> allow you control how page, column, or region breaks behave before and after an element. <a href=\"https:\/\/caniuse.com\/#search=break-before\">Support is excellent<\/a>, but older browsers may use the similar <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/page-break-before\"><code class=\"\" data-line=\"\">page-break-before<\/code><\/a> and <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/page-break-after\"><code class=\"\" data-line=\"\">page-break-after<\/code><\/a> properties.<\/p>\n<p>The following <code class=\"\" data-line=\"\">break-before<\/code> and <code class=\"\" data-line=\"\">break-after<\/code> values can be used:<\/p>\n<ul>\n<li><code class=\"\" data-line=\"\">auto<\/code>: the default \u2014 a break is permitted but not forced<\/li>\n<li><code class=\"\" data-line=\"\">avoid<\/code>: avoid a break on the page, column or region<\/li>\n<li><code class=\"\" data-line=\"\">avoid-page<\/code>: avoid a page break<\/li>\n<li><code class=\"\" data-line=\"\">page<\/code>: force a page break<\/li>\n<li><code class=\"\" data-line=\"\">always<\/code>: an alias of <code class=\"\" data-line=\"\">page<\/code><\/li>\n<li><code class=\"\" data-line=\"\">left<\/code>: force page breaks so the next is a left page<\/li>\n<li><code class=\"\" data-line=\"\">right<\/code>: force page breaks so the next is a right page<\/li>\n<\/ul>\n<p>Example: force a page break immediately prior to any <code class=\"\" data-line=\"\">&lt;h1&gt;<\/code> heading:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;h1&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;break-before&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; always&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p><em>Note: be wary of over-using page breaks. Ideally, printer output should use as few pages as possible.<\/em><\/p>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/break-inside\"><code class=\"\" data-line=\"\">break-inside<\/code><\/a> (and older <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/page-break-inside\"><code class=\"\" data-line=\"\">page-break-inside<\/code><\/a>) property specifies whether a page break is permitted inside an element. The commonly supported values:<\/p>\n<ul>\n<li><code class=\"\" data-line=\"\">auto<\/code>: the default \u2014 a break is permitted but not forced<\/li>\n<li><code class=\"\" data-line=\"\">avoid<\/code>: avoid an inner break where possible<\/li>\n<li><code class=\"\" data-line=\"\">avoid-page<\/code>: avoid an inner page break where possible<\/li>\n<\/ul>\n<p>This can be preferable to specifying page breaks, since you can use as little paper as possible while avoiding page breaks within grouped data such as tables or images:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n&lt;span class=&quot;token selector&quot;&gt;table&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; img&lt;span class=&quot;token punctuation&quot;&gt;,&lt;\/span&gt; svg&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;break-inside&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; avoid&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/widows\"><code class=\"\" data-line=\"\">widows<\/code><\/a> property specifies the minimum number of lines in a block that must be shown at the <strong>top<\/strong> of a page. Imagine a block with five lines of text. The browser wants to make a page break after line four so the last line appears at the top of the next page. Setting <code class=\"\" data-line=\"\">widows: 3;<\/code> breaks on or before line two so at least three lines carry over to the next page.<\/p>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/orphans\"><code class=\"\" data-line=\"\">orphans<\/code><\/a> property is similar to <code class=\"\" data-line=\"\">widows<\/code> except it controls the minimum number of lines to show at the <strong>bottom<\/strong> of a page.<\/p>\n<p>The <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/box-decoration-break\"><code class=\"\" data-line=\"\">box-decoration-break<\/code><\/a> property controls element borders across pages. When an element with a border has an inner page break:<\/p>\n<ul>\n<li><code class=\"\" data-line=\"\">slice<\/code>: the default, splits the layout. The top border is shown on the first page and the bottom border is shown on the second page.<\/li>\n<li><code class=\"\" data-line=\"\">clone<\/code>: replicates the margin, padding, and border. All four borders are shown on both pages.<\/li>\n<\/ul>\n<p>Finally, <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/@page\">CSS Paged Media (<code class=\"\" data-line=\"\">@page<\/code>)<\/a> has <a href=\"https:\/\/caniuse.com\/#feat=css-paged-media\">limited browser support<\/a> but provides a way to target specific pages so alternative margins or breaks can be defined:<\/p>\n<pre class=\"language-css\"><code class=\"\" data-line=\"\">&lt;span class=&quot;token comment&quot;&gt;\/* print.css *\/&lt;\/span&gt;\n\n&lt;span class=&quot;token comment&quot;&gt;\/* target all pages *\/&lt;\/span&gt;\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@page&lt;\/span&gt;&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;margin&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;2&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;cm&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token comment&quot;&gt;\/* target the first page only *\/&lt;\/span&gt;\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@page&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt;first&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;margin-top&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;6&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;cm&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token comment&quot;&gt;\/* target left (even-numbered) pages only *\/&lt;\/span&gt;\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@page&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt;left&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;margin-right&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;4&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;cm&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n\n&lt;span class=&quot;token comment&quot;&gt;\/* target right (odd-numbered) pages only *\/&lt;\/span&gt;\n&lt;span class=&quot;token atrule&quot;&gt;&lt;span class=&quot;token rule&quot;&gt;@page&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt;right&lt;\/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;\/span&gt;\n  &lt;span class=&quot;token property&quot;&gt;margin-left&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;\/span&gt; &lt;span class=&quot;token number&quot;&gt;4&lt;\/span&gt;&lt;span class=&quot;token unit&quot;&gt;cm&lt;\/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;\/span&gt;\n&lt;span class=&quot;token punctuation&quot;&gt;}&lt;\/span&gt;\n<\/code><\/pre>\n<p>The CSS page break properties can be placed within your <code class=\"\" data-line=\"\">screen<\/code> or <code class=\"\" data-line=\"\">print<\/code> styles because they only affect printing, but I recommend using them in print CSS for clarity.<\/p>\n<p>Be aware that page break control is little more than a suggestion to the browser. There\u2019s no guarantee a break will be forced or avoided because layout is restricted to the confines of the paper.<\/p>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_content_4\" class=\"sitepoint_content proper-dynamic-insertion\">\u00a0<\/div>\n<div class=\"proper-ad-unit\">\n<div id=\"proper-ad-sitepoint_dynamic_5\" data-google-query-id=\"CKTa3cn6qfkCFYboEQgdAAoC1Q\">\n<div id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_5_0__container__\"><iframe id=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_5_0\" tabindex=\"0\" title=\"3rd party ad content\" role=\"region\" name=\"google_ads_iframe_\/5376056,7448792\/sitepoint_dynamic\/dynamic_5_0\" width=\"1\" height=\"1\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" aria-label=\"Advertisement\" data-google-container-id=\"9\" data-load-complete=\"true\" data-mce-fragment=\"1\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"printingpains\">Printing Pains<\/h2>\n<p>Control over printing web media will always be limited, and results can vary across browsers. That said:<\/p>\n<ul>\n<li>printer-friendly style sheets can be retro-fitted to any site<\/li>\n<li>most printer styling will work in the majority of browsers<\/li>\n<li>print styles will not affect or break existing functionality<\/li>\n<li>the development costs are minimal.<\/li>\n<\/ul>\n<p>Adding a few page breaks and removing unnecessary sections will delight users and raise your site above competitors. <em>Add it to your to-do list!<\/em><\/p>\n<p>For more advanced CSS knowledge, read our book, <a href=\"https:\/\/www.sitepoint.com\/premium\/books\/css-master-2nd-edition?utm_source=blog&amp;utm_medium=articles\">CSS Master, 2nd Edition<\/a>.<\/p>\n<\/div>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\">How to Create Printer-friendly Pages with CSS<\/p>\n<p class=\"more-link-p\"><a class=\"more-link\" href=\"https:\/\/monodes.com\/predaelli\/2022\/08\/03\/how-to-create-printer-friendly-pages-with-css\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[46],"tags":[324,314],"class_list":["post-9530","post","type-post","status-publish","format-link","hentry","category-web","tag-css","tag-printer","post_format-post-format-link"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-2tI","jetpack-related-posts":[{"id":10748,"url":"https:\/\/monodes.com\/predaelli\/2023\/08\/30\/my-little-printer-friendly-css\/","url_meta":{"origin":9530,"position":0},"title":"My little printer-friendly CSS","author":"Paolo Redaelli","date":"2023-08-30","format":false,"excerpt":"Here is my little \"Printer friendly CSS\" that I add to each and every page using Simple Custom CSS and JS \/* override styles when printing *\/ @media print { @page { margin: 2cm; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } \/* target the first\u2026","rel":"","context":"In &quot;Tricks&quot;","block_context":{"text":"Tricks","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/tricks\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4343,"url":"https:\/\/monodes.com\/predaelli\/2018\/05\/26\/why-css-grid-is-better-than-bootstrap-for-creating-layouts\/","url_meta":{"origin":9530,"position":1},"title":"Why CSS Grid is better than Bootstrap for creating layouts","author":"Paolo Redaelli","date":"2018-05-26","format":"link","excerpt":"CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the\u2026 Sorgente: Why CSS Grid is better than Bootstrap for creating layouts","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6373,"url":"https:\/\/monodes.com\/predaelli\/2020\/01\/01\/how-to-style-your-gtk-app-with-css-and-haskell-codeburst\/","url_meta":{"origin":9530,"position":2},"title":"How to Style Your GTK App with CSS and Haskell &#8211; codeburst","author":"Paolo Redaelli","date":"2020-01-01","format":"link","excerpt":"For the upcoming release of Gifcurry \u2014 an open-source, video-to-GIF maker \u2014 a completely custom theme was made using CSS and Haskell. The\u2026 Source: How to Style Your GTK App with CSS and Haskell - codeburst How to Style Your GTK App with CSS and Haskell Lettier Jun 28, 2018\u2026","rel":"","context":"In &quot;Senza categoria&quot;","block_context":{"text":"Senza categoria","link":"https:\/\/monodes.com\/predaelli\/category\/senza-categoria\/"},"img":{"alt_text":"Lettier","src":"https:\/\/i0.wp.com\/miro.medium.com\/fit\/c\/48\/48\/1%2ADM2bfIVj3LLgyG3hMirauw.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":10190,"url":"https:\/\/monodes.com\/predaelli\/2023\/01\/06\/a-collection-of-popular-layouts-and-patterns-made-with-css-css-layout\/","url_meta":{"origin":9530,"position":3},"title":"A collection of popular layouts and patterns made with CSS &#8211; CSS Layout","author":"Paolo Redaelli","date":"2023-01-06","format":false,"excerpt":"A collection of popular layouts and patterns made with CSS - CSS Layout","rel":"","context":"In &quot;Web&quot;","block_context":{"text":"Web","link":"https:\/\/monodes.com\/predaelli\/category\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10151,"url":"https:\/\/monodes.com\/predaelli\/2022\/12\/26\/css-infinite-3d-sliders\/","url_meta":{"origin":9530,"position":4},"title":"CSS Infinite 3D Sliders","author":"Paolo Redaelli","date":"2022-12-26","format":false,"excerpt":"CSS Infinite 3D Sliders CSS-Tricks is really a huge treasure","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5369,"url":"https:\/\/monodes.com\/predaelli\/2019\/03\/19\/8-useful-css-tricks-parallax-images-sticky-footers-and-more\/","url_meta":{"origin":9530,"position":5},"title":"8 useful CSS tricks: Parallax images, sticky footers and more","author":"Paolo Redaelli","date":"2019-03-19","format":"link","excerpt":"8 useful CSS tricks: Parallax images, sticky footers and more This article shares some of my most satisfying \u201cah-hah!\u201d moments learning CSS, and I hope it can prompt some \u201cah-hah!\u201d moments for you too. Sticky Footer Zoom-on-Hover Images Instant Night Mode Custom Bullet Points Parallax Images Animation with Cropped Images\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/9530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=9530"}],"version-history":[{"count":0,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/9530\/revisions"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=9530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=9530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=9530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}