Note that you can use print units (e.g., inches and mm) inside Bonus tip: Creating a print button

These settings are optimized for landscape printing, since the certificate is landscape. 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 url('assets/css/CPLibraryAll.css') print Īdd a definition for control aspects of the printed Create the file that will hold the print rulesįirst, add a link in the HTML to an additional CSS file: I’ll show how to print a clean certificate without any of the onscreen user interface. Specifically, let’s look at printing a certificate from an Adobe Captivate course. In fact, you can even target print-specific styling on individual elements, which I’ll show you in a moment. There is a way to control more aspects of printing. 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. This simple change won’t fix every printing scenario. You may want to provide instructions to users on how to print with the background, but beyond that your site is ready to print. If everything looks good at this stage, then you’re all set.

Select the Background Graphics checkbox to include background images. Reload the page in your browser and choose File > Print. To apply the fix, open your HTML file in a text editor and search for any or media attribute with a value of all: If you have a simple page, you may be able to modify a single HTML attribute to dramatically improve the printed result. The layout is completely lost in the print version … or is it? The quick fix Unfortunately, the print preview looks nothing like your beautiful website. To test what users will see when they print, choose File > Print from Google Chrome (it’s got a nice print preview). You’ve got a site that looks great on screen, and you need users to be able to print what they see. I’m going to show you how to make your web page print the same way it looks on screen. Have you ever tried to print from your web browser? Why does the printed version look nothing like what’s in your browser?Ĭommon issues when printing from the web include shifted elements, missing images, content not fitting the page, etc.

Text print test page