Replacing the website header when printing web pages
Until this week, printing web pages resulted in the University crest looking broken and ugly. We needed to find a way to replace this for printed documents. We achieved this with a few tweaks to one jQuery file, common to most webpages on the site, and two style sheets (style.css and print.css).
The issue
The University crest displayed on the University website is a GIF with transparency applied to St Andrews Blue (#00539b). It looks like this:
Displayed on a St Andrews Blue background it looks fine; printed onto paper, it looks very bad and doesn’t reflect the professional image that the University would like to project.
I’ve been meaning to fix this for months in the print-specific style sheet but other things kept me from addressing it, until this week.
In discussion with someone from our Print & Design unit we decided to use the monochrome crest and header as used on University letter heads, which currently looks like this:
We didn’t want to assume that users would be printing the document on a colour printer, so we set the text to black and ensured that the monochrome header accompanies it.
Method
Broadly speaking, there are two methods of including an alternative images on a webpage, with which we can use CSS to control under which circumstances it is displayed:
- Apply a background image.
- Insert the image within the document, as content.
Applying the header image as a background-image was ruled out immediately as browsers generally disable the ability to print web page backgrounds unless the user enables that functionality. That’s not reliable enough a solution.
That left inserting the image into the document. Again, two methods:
- Drop the image directly into the document (in T4 Site Manager this would mean adding it to the Style), or
- Inject it into the DOM using JavaScript.
As there are over 20 styles—in true Blue Peter style—for speed, I chose to use (double—sided) JavaScript.
EDIT: Correction, there are currently 114 CMS styles (read themes or page layouts), and over 435 in total. I didn’t have the time to edit all of these manually. So for speed I chose to use JavaScript. For a longer explanation of this see the comments. End of edit.
I also provided a way for those few with JavaScript switched off who wished to print the page to at least view the text from the H1 heading “University of St Andrews”.
Code
The following is the code currently used on the University website:
HTML
Here’s the header on the main University website (omitting the full code for the Google Search):
<!—header –>
<div id=”header” class=”span-33 last”>
<h1><a href=”external-1-home.html” title=”University of St Andrews home”>University of St Andrews</a></h1>
<a href=”external-1-home.html” title=”University of St Andrews home”><img src=”images/header_crest_1413.gif” width=”42″ height=”52″ alt=”University crest” /></a>
<form id=”googlesearch”… /></form>
</div>
jQuery
First we add a class of .js-enabled to #header. That way we can provide a fall-back for any users who do not have JavaScript enabled, otherwise they would see no header whatsoever.
Next we ‘prepend’ the print-header div above .container so that it appears at the top of the document, before all other content.
// Load print-friendly header image into DOM after the page has loaded.
$(document).ready(function() {
$(‘div#header’).addClass(‘js-enabled’);
$(‘.container’).prepend(‘<div id=”print-header”><img src=”images/print-header.png” />
/div>’);
});
Screen style sheet
This is very simple: do not display the newly inserted piece of HTML code on the screen.
/* Hide print-only header from displaying on screen. */
#print-header {
display: none;
}
Print style sheet
First we hide all elements of the #header that we do not want to print: the Google search box (form), the crest (img) and then only if JavaScript is enabled (#header.js-enabled) the entire header.
If JavaScript is disabled then all that will remain is the H1 element.
/* Hide screen-only header when printing. */
#header.js-enabled,
#header form,
#header img {
display: none;
}
So, let’s style the H1 element, which in this case also contained an anchor tag. We’ll remove the default underlining of the link.
/* Style non-JavaScript heading */
#header h1 a {
text-decoration: none;
}
That is the non-JavaScript users catered for, and the appropriate elements have been hidden also for those with JavaScript enabled. First we need to display the #print-header that we inserted using JavaScript and then hid using the screen style sheet.
/* Display print-only header when printing. */
#print-header {
display: block;
}
Next, we have to constrain the size and proportions of the image.
#print-header img {
height: auto;
max-width: 100%;
width: 20cm;
}
Conclusion
Here, then, is a comparison of the printed page before we carried out this work with how it looks now, both with and without JavaScript enabled.
Above: Print preview before, with poor-looking crest
Above: Print preview now, with JavaScript enabled
Above: Print preview now, with JavaScript disabled
I think it looks much better now, more professional.
Afterword
I won’t mention that I accidentally broke two other websites who were pulling in the jQuery common file that I edited. If that was your website: sorry.
A lesson on why we should separate CSS and JavaScript files between projects: even if they initially share features and functionality, they might not always. We don’t do that now, but we did back when we set up these sites.
Why not just use an image that prints nicely? Either a gif (with the transparency corrected), or a png? And why Javascript? Could you not include both logos on the page, and show/hide using CSS? I'm interested to know what made you go with this solution!
Why not just load both images, have a display:none assigned to the print one, and in put @media print {#header-web:display:none; #lheader-print:display:block;} in your stylesheet? I doubt the b/w image has a lot of overhead, it'll get cached regardless, and most browsers (at least mobile, where it matters most) are smart enough not to request content that has display:none set on them in their media queries.
Two questions asking the same thing: why didn't I just include both images in the HTML and use CSS to hide the print header? As I said in the post, "As there are over 20 styles—in true Blue Peter style—for speed, I chose to use (double—sided) JavaScript." A "style" in TERMINALFOUR (T4) Site Manager-speak, the content management system we use at St Andrews, equates to a page layout, more or less. They sort of equate to themes in WordPress. I heavily underestimated how many we have: I said over 20 styles, we actually have 114 for the main University website, and 437 for all the websites within Site Manager. Each one would need to be edited manually to insert the print-only header in the right place, and this would take days of work. Even if the whole web team turned their hand to it. And not only editing the HTML files, but also making sure that the various CSS files had the code to hide the print-only header, and show it again in the various print stylesheets. I didn't have weeks to do this; I had at most two days. We had to get this done quickly, partly for political reasons, partly because we're in the middle of a pretty massive project and couldn't assign any more resource to it. It had to be a quick win on a tight schedule. And that is why I chose to use JavaScript: for speed. Almost every page on the main University site pulls in a JavaScript file called jquery-common.js, almost every page pulls in the common site-wide style sheet and the print style sheet. So rather than days and days of manually editing T4 styles I took the practical option and injected the appropriate code into the page with JavaScript. It broke three sections of the site, which I regret, but I quickly fixed it within a minute or two of finding out. The next time we need to edit the styles, or embark on a site-wide redesign, then we'll move the print-only header into the HTML. Until then this works fine.
I suppose that when all a website's supported browsers support SVG, it would be possible to have one SVG logo that looks good both on-screen and in print, and optionally change its display in print via CSS (say, making it black-and-white instead of colour, and revealing more detail if required).
@Tavis — agreed, although our colour and mono crests/logos are completely different. But the principle would be the same. Like I said, obviously, not clearly enough in the original post: we needed to get this done really quickly which was why I chose the option went went with.
thanks very much this was really helpful
This is awesome!! really helpful for me. Thanks for sharing with us. Following links also helped me to complete my task. http://www.mindstick.com/Articles/83e5fed0-9db4-4b35-b34b-cca8de153655/?Print%20and%20Print%20Preview%20separately%20using%20HTML%20CSS%20and%20JavaScript http://www.codeproject.com/Tips/503415/Print-Div-Content-Using-JavaScript