--- meta-title: Better printing of webpages title: Better printing of webpages description: To come cta: It is easy to forget about what our well-crafted on-screen webpage looks like when someone goes to print. Here are some tips on diagnossing the page's apperance, and making it look better. hero-class: hero-building-blocks hero: true filter-nav: false filter-dropdowns: false layout: static pagetype: meta-pattern location: printing.html --- {{#markdown}}

On this page

Loading...

Here are four methods and tools to make a big difference. ### 1. Diagnose: Emulate print styles Chrome can emulat the look of your site when printing -- and this lets you still inspect elements and tweaks CSS settings; more deails over here ### 2. Setup: Tweak your styles for print This is built in for those that use the full version of the EBI Visual framework. In general you'll want to hide background graphics, change font sizes and make text `#000` black. ### 3. Customise: Media queries Use media queries to optimise for your website's particular needs: ``` @media print { /* All your print styles go here */ } ``` And ask yourself: how does the user's use case change when printing vs when it was on screen? ### 4. Hide it: Tweak for edge cases If you have content that only makes sense on screen (such as related article links), you can use `.hide-for-print` CSS class to, well, hide when printing. There is also a sibling class: `.show-for-print` {{/markdown}}