How to Print a Web Page — the Way It Looks Onscreen

Justin Putney

Owner at Ajar Productions

September 18, 2015

Have you ever tried to print from your web browser? Why does the printed version look nothing like what’s in your browser?

Common issues when printing from the web include shifted elements, missing images, content not fitting the page, etc.

I’m going to show you how to make your web page print the same way it looks on screen.

Help! My printed site looks terrible!

You’ve got a site that looks great on screen, and you need users to be able to print what they see.

To test what users will see when they print, choose File > Print from Google Chrome (it’s got a nice print preview). Unfortunately, the print preview looks nothing like your beautiful website.

The layout is completely lost in the print version … or is it?

The quick fix

If you have a simple page, you may be able to modify a single HTML attribute to dramatically improve the printed result.

To apply the fix, open your HTML file in a text editor and search for any <link> or <style>media attribute with a value of all:

Reload the page in your browser and choose File > Print.

Select the Background Graphics checkbox to include background images.

If everything looks good at this stage, then you’re all set. You may want to provide instructions to users on how to print with the background, but beyond that your site is ready to print.

This simple change won’t fix every printing scenario. What if things still don’t look good at this stage? Perhaps your page is more complex or you need to hide certain elements when printing. Don’t worry, we’ve got answers.

What if the quick fix doesn’t work?

There is a way to control more aspects of printing. In fact, you can even target print-specific styling on individual elements, which I’ll show you in a moment. This will require some testing.

Specifically, let’s look at printing a certificate from an Adobe Captivate course.

I’ll show how to print a clean certificate without any of the onscreen user interface.

Create the file that will hold the print rules

First, add a link in the HTML <head> to an additional CSS file:

On the first line of the newly created print.css file, re-import the existing CSS (which was created by Captivate) but with a print media type:

@import url("assets/css/CPLibraryAll.css") print;

Add a definition for @page to control aspects of the printed page:

@page { }

Add a media query to target elements for print:

@media print { }

We’ll fill in these CSS rules as we test.

Sleeper problem: the speed of testing

You may not realize it, but if your problem-solving process has unnecessary steps, it will slow you down and hamper your ability to reach a solution. Before we start making changes, let’s take a look at our approach to this print-styling problem. In this case, the desired solution is our beautifully printed certificate.

Our default feedback loop for testing new CSS is something like:

Update our CSS
Save the file
Switch to the browser
Refresh the page
Choose File > Print and see the results
Close the Print dialog
Rinse and repeat

That’s only about six steps, but if you repeat the process 30 times, that’s 180 steps. Yikes! If you’re like me, you can’t afford the time or the sanity to run through these steps 180 times.

How to reach the solution faster

Let’s fix this printing problem the smart way and save ourselves tons of time in the process. In my Problem Solving for Web Professionals course, I show you how to shrink the feedback loop.

Just like in the course, we’ll use Web Inspection tools to reduce six steps down to one:

Update a CSS value and see the change live in the browser

Bam! The 180-step process drops to 30 steps. You can now go on about your day as a proud, sane problem-solver.

I’d like to solve the puzzle, Pat

In Google Chrome (which has the best web inspection tools), open the Inspector: View > Developer > Developer Tools, or right-click and choose Inspect Element.

Select the device icon in the upper-left corner of the panel to switch to Device Emulation.

Find and select the Emulation tab (usually near the bottom).

Navigate to the Media section. Select the CSS media checkbox and make sure print is selected in the drop-down menu.

You can now see how the document will print (minus the page boundaries).

Inside the inspection tools, we can now look for elements and test new CSS. For example, I’ve found that the playback controls have an id of playbar, which I then target in the print-only CSS to hide the controls:

@media print {
#playbar { display:none !important; }
}

Make individual pixel adjustments using the UP and DOWN arrow keys. Add SHIFT to jump in 10-pixel increments.

I used this quick testing technique to find that moving the main container 278 pixels to the left hides the Table of Contents, which I added to the print-only CSS:

#main_container { left:-278px !important; }

I also want to hide the Print Certificate button. Using the Inspector, I found that Captivate creates an id that starts with Button_. This CSS hides that button:

[id^="Button_"]{ display:none !important; }

Meanwhile, Chrome is live-previewing changes. We don’t have to switch between applications!

The last few adjustments do require that you check the Print Preview. Here’s the completed print.css file with settings that worked for me in terms of the page margins:

@page {
margin:.25in;
padding:0;
}

@media print {
html, body {
width:110%;
height:auto;
margin:auto;
padding:0;
}

#main_container { left:-278px !important; }
#playbar { display:none !important; }
[id^="Button_"]{ display:none !important;}
}

These settings are optimized for landscape printing, since the certificate is landscape. Note that you can use print units (e.g., inches and mm) inside of @page rules.