Loading ...
Designing Print Friendly Websites & Articles
I have written about print friendly webpages 2 years back and I think it’s time to create a better tutorial. Over the past years, my knowledge has grown immensely and I have a much better understanding of CSS and HTML than before.
The idea
In your browser, you can push the print button, which will give the command to print the page you are visiting. That page has information that your visitor doesn’t want to appear on the printed version. That’s why it is possible to specify different stylesheets for different mediums.
When you link to a stylesheet suitable to all devices, you will use the following line between your <head> tags.
1
<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="all.css" />
However, if you would like to specify different stylesheets for the print situation and the normal situation, you will use the following HTML lines:
1 2 3
<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="all.css" />
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print.css" />
Styling your different CSS
You now have 2 different stylesheets you can use for style. As you can see, one stylesheet is for both the mediums, one is for the print medium only. That means you can easily change the CSS for the printed version.
What Do We Need In Printed Copies of a Page?
An important thing you need to consider is what we exactly want to be printed and what not. Here are a number of things I find important about a printed version of a certain article or website.
Important:
- Black & White copy
- Readable text
- The Article + Images
Not Important & Not Needed
- Advertisements
- Images
- Menus
- Sidebars
- Footer
Let’s start hiding the things we don’t need and make the printed version focus on those things we do need.
Font Sizes
Not all the copy on the internet has the same size; some webdesigners prefer very large sized content, some very small font-sizes. Please specify a font size that you feel is realistic for everyone’s eyes once printed. I think that’s somewhere around 12 pixels.
1
body{ font-size:12px; }
Padding & Margin
If you delete all your sidebars, headers, footers and menus, you might come to the conclusion that your printed version is strangely located on your paper. You have to make sure you keep enough space around the text. You can do that like this:
1
#content{ margin:5%; width:100%; }
Now you keep a 5% margin between the #content div and your whole printing layout. That means the space between the content and the border of your paper is 5% of the width of the article.
Un-needed Areas
Like I specified before, there are a number of areas you don’t need in the printed version. You can hide them in your print stylesheet:
1
#header, #footer, #sidebar, #menu { display:none; }
If you need other areas you need to hide, you get the point.
Images
We are going to hide and position things a little bit differently than when the article is written online. We want to show the image(s) inside the article, but get ride of images outside the article.
When you have wrapped your article inside the #content div, this is what happens inside your print.css file.
1 2 3
img{ display:none; margin:0; padding:0; }
#content img{ display:inline; }
Colors
Your design usually uses a number of colors in the typography, but also in the backgrounds. Those colors are not needed in a printed version of an article. That’s why we are going to change the colors to fit the paper.
1
#content{ color:#000; background:#fff; }
In this case, your whole article will have a white background with black text on it. This makes the article a bit more readable on the paper. You can also change the color of the text to make it a little less dark, but that’s totally up to you.
Links
In your design, you might have specified strange (hover)effects to your links. In the printed version, these effects aren’t appropriated and people might not recognize a link as a link.
Depending on how many style declarations you have given your links, the following style declarations are usually enough to make them look like links. If you have more things specified in your original stylesheet, don’t hesitate to change them back to a more general look in the print stylesheet.
1
a:link, a:active, a:visited{ color:blue; text-decoration: underline; padding:0; margin:0; line-height:1; }
Admin Specific Content
When you are using a content management system (CMS), you will most likely have the option to change articles or pages from inside your own site. That means that there is somewhere a link to the edit the page. That is a nice and time-saving touch for the online world, but when an administrator is printing a page, you don’t want to have an “edit page” link between the content. It’s time to hide that.
Depending on which class your “edit page” link has (in my case its class is .edit-link) you can hide that link like this:
1
a.edit-link{ display:none; }
You produced various fine issues there. I made a search on the topic and found mainly people will go along with your blog post.