CSS -Print
Web Developers have been building web sites with
Analysis
Before we dig in let’s examine some key issues to consider when dealing with printed material:
- Graphics: One of the fundamental features of web design; without graphics, web sites simply do not hold viewer interest. The problem is that when working with printed material, graphics tend to use a lot of color, be rather large (both in file size and on the page), and generally the look does not translate well to print output. People often do not want to waste their color ink cartridges just to print your web graphics. If you must have graphics in the print output, I advise limiting your graphics to the bare minimum.
- Color: It’s pretty much mandatory for your web site, and the appropriate use of color is what makes a web site distinctive. But again, in the print world color ink is expensive and you shouldn’t assume visitors want a color copy of your web site. I would always advise to stick with black and white as a default; this works best for most standard desktop printers.
- Navigation: It’s essential to have consistent, easy to use navigation on your website. Using a clean, practical and common sense approach to the organization and tools that drive your navigation will ensure your users will find pertinent information quickly and easily. These navigational tools can range from horizontal or vertical drop down menu’s created with JavaScript,
CSS or a combination of both to simple textual links that are styled withCSS . However, displaying the navigational tools that drive your website is not important when printing the page. If visitors are printing your web page it is because they want to reference your content, not your navigation. As a web developer, the path to the page they printed is always placed at the bottom of the print out. This way, if changes are required, you can use this as a reference to the location of the page on the website.
- Fonts & Sizes: Though font families and sizes are determined by the browser’s default style sheet and settings, default settings tend to be Times New Roman and 12 pixels. It is to some degree, hit and miss depending on browser specific settings determined by the user. With this said, when working with font families and sizes on the web, it is recommended you use Arial, Times New Roman or Verdana and relative font sizes, such as em, % or px. When dealing with printed web pages, it is recommended you use physical or absolute font sizes such as pt, inch, and cm. We will be working with pt in this article.
- Relative vs. Physical (Absolute) Font Sizes: Relative font sizes means that a visitor can adjust font settings in their browser to suit their preference. Some visitors, including the elderly might need a larger font size setting whereas younger audiences might want a smaller font size than originally specified by the web developer. Absolute font sizes are fixed in nature. This is why they are used in print. Leaving your users without the option of adjusting font sizes is not the best strategy, especially in terms of accessibility.
The Page
The best way to demonstrate how to make a printed style sheet is to use a design which is already created. We’ll examine how to convert this page to hard-copy format, and discuss a few catches that we need to account for on other pages before the finished print style sheet is complete. Take a look at the finished web version of the page:
Let’s define some goals for the conversion process:
1) We need to remove the:
- Background image
- Rounded corners on images
- Logo, and
- Navigation controls
2) Since the logo will be removed, we need a way to logically and semantically represent the logo.
3) We need a way to represent the page title without all the color.
4) Since my font sizes are defined relatively, we need to change to points (pt). We’ll also change the font family where appropriate to match our web style sheets.
5) The copyright needs to be changed to enhance its significance.
It’s important to consider all the features included in the web layout, so examine carefully how the page is constructed.
In our case, the list above ought to cover what we need to do, so let’s get started.
Open the File
Open up your favorite text editor and open the file called homepage.html (from the zip file you downloaded from the top of the page) and have a look at the following mark-up:
<link href="mfv4.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- @import url(mfv5.css); --> </style>
Note that we have two style sheets defined: one for version 4 browsers (mfv4.css) and one for version 5 (mfv5.css). Note also that our style sheets lack media attributes. We need to define these attributes before we can create print style sheets, so let’s make the following modifications:
<link href="mfv4.css" rel="stylesheet" type="text/css" media="aural"> <style type="text/css" media="aural"> <!-- @import url(mfv5.css); --> </style>
You might be wondering why we chose aural for a media type instead of screen when we want these style sheets to be our web styles. Our reason is simple – we need to change the media value on these two style sheets to a value we know will not be recognized by any media type (web, print, etc.). This will ensure that any rules we write for our print style sheet will not affect our existing web rules. Make the changes, save your work, and use your browser to preview the page. It should look like the
See media attribute set to aural
It’s not too attractive, is it? You probably can guess how our web page would look in print – just like you see it in your browser, and we definitely do not want this. Time now to create a new style sheet called print.css and link it as below:
<link href="mfv4.css" rel="stylesheet" type="text/css" media="aural">
<link href="print.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css" media="aural">
<!--
@import url(mfv5.css);
-->
</style>
Notice something very important in the above code. When we linked the print style sheet to our document we used a media value of screen. You might wonder why we're using screen when this is supposed to be our print style sheet. The reason is because we need a way to see the rules as they apply to the page when printed, and the best way to do this is to style the page in the browser first, with print styles in mind instead of printing this page multiple times, which would be wasted paper. When we are finished, we will change the media values on all style sheets to their appropriate media values.
Background image & Rounded Corners
Since we haven’t included the rules for our rounded corner images or for the background image, no modification is really needed in the print style sheet. However, just to ensure that no monkey business will happen when viewed in a browser, let's explicitly declare a background color of white and turn off any potential background image on the body element:
body{
background-color:!important #fff;
background-image:!important none;
}
The use of the keyword !important will ensure that the styles in the print file will override the declarations in both web versions. In other words, using !important will settle any conflict that might arise in any of our three style sheets.
Next, to ensure the same level ofconsistency we need to turn off background images that some of our cells carry. To do so we'll write a multiple selector rule to turn these off, as you see below:
#tlcorner,#tedge,#trcorner,#redge,#brcorner,#bedge,#blcorner,#ledge{
background-color:!important #fff;
background-image:!important none;
}
When you have multiple elements that will have the same values as shown above,
Logo
Here our first order of business is to remove our logo at the top of the page. Since the logo is contained in a table data cell, we can apply a
/*remove logo*/
td.logo img{
display:none;
}
This rule targets any image tag inside a table cell with a class of logo. By using the display property with a value set to none, we ensure that the logo and the space it occupied are removed from the print style sheet. We also need to make one modification to our
<td class="logo">
<img src="../../images/logo.gif" alt="Midwest Web Design" width="260" height="50">
</td>
By applying the class logo to the table cell that contains our image, we effectively remove it from our print style sheet, as shown here:
Navigation Controls
This part is actually easier than it looks. Since the side bar has an ID in the
/*remove navigation*/
#sidebar{
display:none;
}
Again, by using the display property with a value set to none we remove the navigation from our print style sheet and remove the space it occupied. Nothing is needed in the
Difference between display and visibility
You might have noticed we used display instead of visibility. The difference between display and visibility is that display with a value set to none (display: none) will hide the element visually from displaying and will remove the physical space the element occupied. Using the visibility property with a value set to hidden (visibility: hidden) will hide the element visually from displaying; however, it will preserve the physical space the element occupied.
Recreating the logo
When we created our logo class and removed our graphic from the top (Midwest Web Design), we lost any way of displaying the title to our website in the print version. One way to create the title and probably the most logical is to create a heading two tag in
h2{
font-family:Arial, Helvetica, sans-serif;
font-size:30pt;
color:#000;
}
This rule redefines the Heading Two tag in the print style sheet with a font family of Arial, Helvetica, or the nearest sans-serif font. Then, instead of a relative font size we use a 30-point fixed font size, which ensures the correct measure for print output. Then, since we don’t care about color, we use black. In the
<td class="logo">
<h2>midwest web design</h2>
<img src="../../images/logo.gif" alt="Midwest Web Design" width="260" height="50">
</td>
Preview and test your results using the link below:
Recreating the title to our website
You might wonder why we chose Heading Two instead of Heading One. This is because we used a Heading One tag in my
Recreating the Page Title
We want the title for each of our web pages to be smaller in size than the title of our website. We can fix this easily by defining a font size for Heading One in our print style sheet as shown below:
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18pt;
color:#000;
}
We just reduce the font size to 18 points to simulate the effect of a different heading tag. Also, we give it the same font family as our web style sheet, and set the default color to black. Preview the results using the page address below:
Paragraphs
We want all the paragraphs to look as much like the web styles as possible, so let’s add the following rule to our print style sheet:
p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
}
This sets all paragraphs to the same font family as our web styles – font size to 10 points and color to black. Preview the results here:
Copyright
At this point, you have a nice printed version of the web site, but the copyright is lacking. Since we can’t use colors, let’s bring visual significance to the copyright through another means as shown below:
#footer p{
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-style:italic;
color:#000;
}
This rule assigns a font family of Arial, Helvetica or the nearest sans-serif font, a font size of 8 points, font style of italics, and a color of black to all paragraphs that reside inside an ID of footer. How did we come up with this rule? At the bottom of the
Some Catches
Our print style sheet is looking great, but there are still some changes needed. First, the tutorials section has a table at the top that provides Word and
table#project td.header{
background-image:none;
background-color:#c90;
color:#14314f;
font-weight:bold;
text-align:center;
}
In the printed document, we should not assume the visitor will have color printing enabled or even want to print in color. To ensure the same level of consistency and uniformity as we have taken for the rest of the website, we will omit the background color from the print style sheet and change the color of the font to black as shown below:
table#project td.header{
background-image:none;
color:#000;
font-weight:bold;
text-align:center;
}
Removing background color from project table
Continuing, the tutorials section provides each code sample in a box with a dark background color as shown in the web style sheet:
p.code{
background-color:#ccc;
border:1px solid #000;
padding:4px;
}
We should omit the background color from the print style sheet as it would be nice to avoid excessive ink usage. The print style sheet rule for the code sample should be changed to this:
p.code{
border:1px solid #000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
padding:4px;
}
We removed the background color, added a font family, font size of 10 points and a color of black as shown below:
Finally, when we have new code inside my code block(s) we have a different font color (red), different font family and bold. This rule was named .newcode in my web style sheet and it looks like this:
.newcode{
font:140% "Courier New", Courier, mono;
color:rgb(204%,0%,0%);
}
In the print style sheet we changed some values as shown below:
.newcode{
font:15pt "Courier New", Courier, mono;
color:#000;
font-style:italic;
font-weight:bold;
}
We changed the font from 140% to 15 points. Kept the font family, changed the color to black, and to provide some emphasis to new code we added a font style of italic and a font weight of bold.
Changing the Media Attribute
Before calling homepage_8.html a conclusion you need to change the media values for your style sheets. Both mfv4.css and mfv5.css need to be screen and print.css needs to be print as shown below:
<link href="mfv4.css" rel="stylesheet" type="text/css" media="screen">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<style type="text/css" media="screen">
<!--
@import url("mfv5.css");
-->
</style>
Refresh your page and voila, your web styles come back! Now you have a working version of a web style sheet and a print style sheet for your web site.
Conclusion
As you can see, converting your web site to a printer friendly version is not difficult. Now you know how to:
- Handle graphics, colors, navigation, and font size issues when creating print style sheets
- See your print styles without wasting loads of paper for each change
- Hide graphics and navigation of your page from a print style sheet
- Logically and semantically represent the logo and page titles through heading tags
Finally, you were alerted to other mishaps that can occur when working with print style sheets and some ways to overcome such problems.
Now your pages will slide out of your printer looking as they’re supposed to look!
-AND-
If you have questions, contact me.