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.
