The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
Using CSS to create a better printer friendly web pageRemember the printer? I do, and many others do too! Mine just broke this morning though, so I’ll have to get a new one!
As old fashioned as this may sound, some people do still print things, and may in fact want to print out your web page, for any number of reasons. They might print out a product information page to take up town to allow a comparison, print directions from Bing Maps on how to get to a friends home, or any number of other things. Freeola’s Cheats and Walkthrough pages are a good example of web content that people might search for, but need an “offline” copy of for easy reference later on. If you’re sitting in front of your Playstation 3, you might find it easier to print out some of those PS3 cheats you want to try out, rather than running back and forth to your PC in the other room.
Printing out a page is pretty simple, as most web browsers take care of it for the user, similar to how a Word document may be printed. However, one thing to note is that a print out of a web page may not match that of the way it looks on a computer screen.
Is there anything wrong with how a web browser prints a page??
How a web page is printed can depend on many things, mostly to do with the way the web page has been put together. It’s only natural for many web site owners to only consider the look of their pages on the Internet, and never give a second thought to how a printed out copy may look, perhaps assuming instead that it’ll look the same as it does on the screen.
And this is true lot of the time, but there can be some cases where a print out doesn’t look quite right. If a page is too wide, the edges may be cut off, or the content may be spread over two pages, and difficult to use.
As most web pages aren’t specifically designed to fit on an A4 piece of paper, web browsers sometimes have to manipulate that content to fit it on the page, and they don’t always do a good job of it. But that isn’t the only reason for a printer only page to be included.
What a waste of space, and of my blooming expensive ink!!!
Another issue that you may notice when printing out pages is that they tend to get the whole web page, when all you really wanted was the main article, guide, or product information. You don’t need the logo, can’t use the site navigation, ain’t gonna click on an advertisement, or use the links to other sections, and so forth. What you may notice is that you’ve used up 4 pages for a single page article, and that your ink indicator has drop a little too much for what you’ve just printed out.
Printer friendly pages are good!
Many sites offer a “printer friendly” link from their main pages which cater to the user issues mentioned above, and strip out a lot of the content that isn’t required. The BBC does this with their news articles, as do many other news organisations. If you take a look at the news article Windows 7 release date announced, above the main heading is a link to the printable version, which is basically the article in question, with the BBC logo at the top, and the “Windows 7 features” list of items set out differently.
The design is clean and easy to digest as a printed out piece of paper – the navigation is gone, as well as all the other features that are useful on screen, but not in print. By contrast, if you use the browser print feature direct from the main news article, you get 2 pages of content, most of which the end user is most likely uninterested in.
However, these printer friendly versions are generated on the BBC web servers, and a web script (possibly, Perl, PHP, ASP.NET, etc) has to be written to do this. While such a script can offer greater flexibility, it also involves greater effort, and an understanding of server side technologies.
Printer friendly CSS pages are better!
While creating a separate printer friendly page is a handy idea, and offers greater flexibility, CSS can in fact be used to alter the look of your page if it’s printed, in the same way that CSS is used to set out your pages within a web browser on a computer screen.
Using CSS to cater to the printer reduces the need to create a separate printer friendly version of each of your files, and ensures that your users don’t have to mess about with finding a printer friendly link. If all you want to do is change a look slightly, and remove some of the content, you can use CSS to hide web content from the printer.
In the example above, if the BBC used a CSS print style sheet, anyone who clicked to print the page directly would also get a cleaner print out.
If you know CSS already, and are using it for your current web site, it should be a snap to work with. For those who are new to CSS, you might find some of this a little confusing, but you can always reference this later, once you’ve got stuck in with CSS.
What to consider for a print out version of my pages!
As mentioned above, a lot of what may be printed is waste, and so a good target for a printed out page is to remove these things. Other things to consider might be the layout of the text, as well as the size and colour.
Having site links on a print out is pretty useless, so you’ll want rid of those. You might want to keep the logo, or just use a text heading. Google ads can’t be clicked on from paper, so those might as well be lost also.
You may also want to use a different font on paper, and if you’ve used a smaller font size on your web site, replace this with a larger, easier to read size font. Supposedly, a “sans-serif” font is easier to read on screen that on paper, whereas a “serif” font is better on paper, so you could use one for the screen, the other for the print.
How do I define a CSS printer style sheet?
You can define printer styles in the same way that you would for a regular style sheet, either within a web page, or as an external reference file. The key difference is when defining the
media attribute. Rather than using the “[I]screen[/I]” value with the attribute, you’ll simply need to replace this with the “[I]print[/I]” value, which tells the browser that the following styles that are defined are intended for when a page is printed.If you’ve never used the
media attribute before, that’s okay, as browsers tend to automatically assign CSS to the screen, but to make use of printer style sheets, you will need to use this attribute, and the correct “[I]print[/I]” value.It’s quite important to note that when using CSS for your web site, if you don’t use the
media attribute to state the CSS is just for the screen, some of the CSS values might be used for the printer version, but some might not. One example is text colour. Buy default, text is black for screen and print. If you assign red text, but don’t set the media attribute just for the screen, that red text will appear on your print version as well (unless you over-ride it).Including the printer CSS properties within a page!
Including print CSS within a web page can be done as shown in the example below, and is done in the same way as regular CSS. Note, however, that the only difference is the use of the
media attribute, and that it has the value “[I]print[/I]”: <style type="text/css" [B]media="[I]print[/I]"[/B]>
body {
background: white;
color: black;
font-size: 2.1em;
font-family: serif;
text-align: justify;
}
img, ol {
display: none;
}
</style>… and with this, the browser knows to make any print out have black text, using a serif font, with larger text size, and to justify the text. The
justify setting makes the text line up to both the left and right side margins, and may cause the spacing between each word to vary. We’ve also used the display: none; settings on the navigation list and the images, so those will not appear on your print out.Also note the American spelling of “color” when using CSS.
Including CSS referenced from an external file!
The same CSS print styles can be saved in an external file, exactly how regular CSS can be done in this way! Again though, the key point is to use the
media="[I]print[/I]" attribute and value combination within your chosen CSS reference method, so that the browser knows what the CSS styles are for, such as: <link rel="stylesheet" href="print.css" type="text/css" [B]media="[I]print[/I]"[/B]>... or …
<style type="text/css" [B]media="[I]print[/I]"[/B]>
@import "print.css";
</style>… and within the print.css file, you’d have your CSS that defines how a printed out page should look:
body {
background: white;
color: black;
font-size: 2.1em;
font-family: serif;
text-align: justify;
}
img, ol {
display: none;
}I’ve uploaded three CSS examples of using a printer based style sheet to illustrate is usages. The first example does not have any printer CSS defined, while the second has one, but shows how the regular CSS can blend in to it without you realising, while the third uses the example code above, and shows a separate page than what is seen on screen. You’d be forgiven for thinking they were not the same web page.
Targeting items on a larger web page!
As the example above is quite basic, I have only used HTML tag names to target specific elements, such as images (
<img>) and lists (<ol>, <ul>, etc). On a larger web site, you will likely find that you need to target specific pieces of content to alter or to hide. You could create a separate class called print, and give it the display: none; property, and then apply the class name to every element you wish to hide, such as: <style type="text/css" [B]media="[I]print[/I]"[/B]>
.print {
display: none;
}
</style>
<h1>Site name</h1>
<ul [B]class="[I]print[/I]"[/B]>
<li>a link</li>
<li>a link</li>
<li>a link</li>
</ul>
<p>some text</p>
<p>some text</p>
<p [B]class="[I]print[/I]"[/B]><img � ></p>
<ul>
<li>just a list</li>
<li>just a list</li>
<li>just a list</li>
</ul>
<p>some text</p>
<p [B]class="[I]print[/I]"[/B]><img � ></p>
<p>some text</p>Alternatively, you could target each element that has been given an
id attribute, like so: <style type="text/css" [B]media="[I]print[/I]"[/B]>
[B]#nav[/B], [B]#us[/B], [B]#them[/B] {
display: none;
}
</style>
<h1 id="title">Site name</h1>
<ul [B]id="[I]nav[/I]"[/B]>
<li>a link</li>
<li>a link</li>
<li>a link</li>
</ul>
<p>some text</p>
<p>some text</p>
<p [B]id="[I]us[/I]"[/B]><img � ></p>
<ul id="tips">
<li>just a list</li>
<li>just a list</li>
<li>just a list</li>
</ul>
<p>some text</p>
<p [B]id="[I]them[/I]"[/B]><img � ></p>
<p>some text</p>Or maybe use a combination of the two, the end result should hopefully be the same, that the user gets a better printed out page when then hit that “print” button on the browser task bar.
Print to your hearts content!
This has been a rather basic approach to printing with CSS, as all that we’ve done is removed some items and changed some text, but that is often all that needs to be done for a user to get a better print out.
With the basics under your belt, and an idea in your head, you can create quite a detailed and useful print out of your page. If you so desired, your print out could look completely different from your actual web page.
The key point of the CSS print out is to take advantage of the whole page, not to waste any of it with unnecessary content, and to allow people to print directly from their browser, rather than having to find a separate printer friendly page.
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
As always, any comments, questions, and especially corrections are welcome.
Very nice, very useful and humourous too ^_^
Using CSS to create a better printer friendly web pageRemember the printer? I do, and many others do too! Mine just broke this morning though, so I’ll have to get a new one!
As old fashioned as this may sound, some people do still print things, and may in fact want to print out your web page, for any number of reasons. They might print out a product information page to take up town to allow a comparison, print directions from Bing Maps on how to get to a friends home, or any number of other things. Freeola’s Cheats and Walkthrough pages are a good example of web content that people might search for, but need an “offline” copy of for easy reference later on. If you’re sitting in front of your Playstation 3, you might find it easier to print out some of those PS3 cheats you want to try out, rather than running back and forth to your PC in the other room.
Printing out a page is pretty simple, as most web browsers take care of it for the user, similar to how a Word document may be printed. However, one thing to note is that a print out of a web page may not match that of the way it looks on a computer screen.
Is there anything wrong with how a web browser prints a page??
How a web page is printed can depend on many things, mostly to do with the way the web page has been put together. It’s only natural for many web site owners to only consider the look of their pages on the Internet, and never give a second thought to how a printed out copy may look, perhaps assuming instead that it’ll look the same as it does on the screen.
And this is true lot of the time, but there can be some cases where a print out doesn’t look quite right. If a page is too wide, the edges may be cut off, or the content may be spread over two pages, and difficult to use.
As most web pages aren’t specifically designed to fit on an A4 piece of paper, web browsers sometimes have to manipulate that content to fit it on the page, and they don’t always do a good job of it. But that isn’t the only reason for a printer only page to be included.
What a waste of space, and of my blooming expensive ink!!!
Another issue that you may notice when printing out pages is that they tend to get the whole web page, when all you really wanted was the main article, guide, or product information. You don’t need the logo, can’t use the site navigation, ain’t gonna click on an advertisement, or use the links to other sections, and so forth. What you may notice is that you’ve used up 4 pages for a single page article, and that your ink indicator has drop a little too much for what you’ve just printed out.
Printer friendly pages are good!
Many sites offer a “printer friendly” link from their main pages which cater to the user issues mentioned above, and strip out a lot of the content that isn’t required. The BBC does this with their news articles, as do many other news organisations. If you take a look at the news article Windows 7 release date announced, above the main heading is a link to the printable version, which is basically the article in question, with the BBC logo at the top, and the “Windows 7 features” list of items set out differently.
The design is clean and easy to digest as a printed out piece of paper – the navigation is gone, as well as all the other features that are useful on screen, but not in print. By contrast, if you use the browser print feature direct from the main news article, you get 2 pages of content, most of which the end user is most likely uninterested in.
However, these printer friendly versions are generated on the BBC web servers, and a web script (possibly, Perl, PHP, ASP.NET, etc) has to be written to do this. While such a script can offer greater flexibility, it also involves greater effort, and an understanding of server side technologies.
Printer friendly CSS pages are better!
While creating a separate printer friendly page is a handy idea, and offers greater flexibility, CSS can in fact be used to alter the look of your page if it’s printed, in the same way that CSS is used to set out your pages within a web browser on a computer screen.
Using CSS to cater to the printer reduces the need to create a separate printer friendly version of each of your files, and ensures that your users don’t have to mess about with finding a printer friendly link. If all you want to do is change a look slightly, and remove some of the content, you can use CSS to hide web content from the printer.
In the example above, if the BBC used a CSS print style sheet, anyone who clicked to print the page directly would also get a cleaner print out.
If you know CSS already, and are using it for your current web site, it should be a snap to work with. For those who are new to CSS, you might find some of this a little confusing, but you can always reference this later, once you’ve got stuck in with CSS.
What to consider for a print out version of my pages!
As mentioned above, a lot of what may be printed is waste, and so a good target for a printed out page is to remove these things. Other things to consider might be the layout of the text, as well as the size and colour.
Having site links on a print out is pretty useless, so you’ll want rid of those. You might want to keep the logo, or just use a text heading. Google ads can’t be clicked on from paper, so those might as well be lost also.
You may also want to use a different font on paper, and if you’ve used a smaller font size on your web site, replace this with a larger, easier to read size font. Supposedly, a “sans-serif” font is easier to read on screen that on paper, whereas a “serif” font is better on paper, so you could use one for the screen, the other for the print.
How do I define a CSS printer style sheet?
You can define printer styles in the same way that you would for a regular style sheet, either within a web page, or as an external reference file. The key difference is when defining the
media attribute. Rather than using the “[I]screen[/I]” value with the attribute, you’ll simply need to replace this with the “[I]print[/I]” value, which tells the browser that the following styles that are defined are intended for when a page is printed.If you’ve never used the
media attribute before, that’s okay, as browsers tend to automatically assign CSS to the screen, but to make use of printer style sheets, you will need to use this attribute, and the correct “[I]print[/I]” value.It’s quite important to note that when using CSS for your web site, if you don’t use the
media attribute to state the CSS is just for the screen, some of the CSS values might be used for the printer version, but some might not. One example is text colour. Buy default, text is black for screen and print. If you assign red text, but don’t set the media attribute just for the screen, that red text will appear on your print version as well (unless you over-ride it).Including the printer CSS properties within a page!
Including print CSS within a web page can be done as shown in the example below, and is done in the same way as regular CSS. Note, however, that the only difference is the use of the
media attribute, and that it has the value “[I]print[/I]”: <style type="text/css" [B]media="[I]print[/I]"[/B]>
body {
background: white;
color: black;
font-size: 2.1em;
font-family: serif;
text-align: justify;
}
img, ol {
display: none;
}
</style>… and with this, the browser knows to make any print out have black text, using a serif font, with larger text size, and to justify the text. The
justify setting makes the text line up to both the left and right side margins, and may cause the spacing between each word to vary. We’ve also used the display: none; settings on the navigation list and the images, so those will not appear on your print out.Also note the American spelling of “color” when using CSS.
Including CSS referenced from an external file!
The same CSS print styles can be saved in an external file, exactly how regular CSS can be done in this way! Again though, the key point is to use the
media="[I]print[/I]" attribute and value combination within your chosen CSS reference method, so that the browser knows what the CSS styles are for, such as: <link rel="stylesheet" href="print.css" type="text/css" [B]media="[I]print[/I]"[/B]>... or …
<style type="text/css" [B]media="[I]print[/I]"[/B]>
@import "print.css";
</style>… and within the print.css file, you’d have your CSS that defines how a printed out page should look:
body {
background: white;
color: black;
font-size: 2.1em;
font-family: serif;
text-align: justify;
}
img, ol {
display: none;
}I’ve uploaded three CSS examples of using a printer based style sheet to illustrate is usages. The first example does not have any printer CSS defined, while the second has one, but shows how the regular CSS can blend in to it without you realising, while the third uses the example code above, and shows a separate page than what is seen on screen. You’d be forgiven for thinking they were not the same web page.
Targeting items on a larger web page!
As the example above is quite basic, I have only used HTML tag names to target specific elements, such as images (
<img>) and lists (<ol>, <ul>, etc). On a larger web site, you will likely find that you need to target specific pieces of content to alter or to hide. You could create a separate class called print, and give it the display: none; property, and then apply the class name to every element you wish to hide, such as: <style type="text/css" [B]media="[I]print[/I]"[/B]>
.print {
display: none;
}
</style>
<h1>Site name</h1>
<ul [B]class="[I]print[/I]"[/B]>
<li>a link</li>
<li>a link</li>
<li>a link</li>
</ul>
<p>some text</p>
<p>some text</p>
<p [B]class="[I]print[/I]"[/B]><img � ></p>
<ul>
<li>just a list</li>
<li>just a list</li>
<li>just a list</li>
</ul>
<p>some text</p>
<p [B]class="[I]print[/I]"[/B]><img � ></p>
<p>some text</p>Alternatively, you could target each element that has been given an
id attribute, like so: <style type="text/css" [B]media="[I]print[/I]"[/B]>
[B]#nav[/B], [B]#us[/B], [B]#them[/B] {
display: none;
}
</style>
<h1 id="title">Site name</h1>
<ul [B]id="[I]nav[/I]"[/B]>
<li>a link</li>
<li>a link</li>
<li>a link</li>
</ul>
<p>some text</p>
<p>some text</p>
<p [B]id="[I]us[/I]"[/B]><img � ></p>
<ul id="tips">
<li>just a list</li>
<li>just a list</li>
<li>just a list</li>
</ul>
<p>some text</p>
<p [B]id="[I]them[/I]"[/B]><img � ></p>
<p>some text</p>Or maybe use a combination of the two, the end result should hopefully be the same, that the user gets a better printed out page when then hit that “print” button on the browser task bar.
Print to your hearts content!
This has been a rather basic approach to printing with CSS, as all that we’ve done is removed some items and changed some text, but that is often all that needs to be done for a user to get a better print out.
With the basics under your belt, and an idea in your head, you can create quite a detailed and useful print out of your page. If you so desired, your print out could look completely different from your actual web page.
The key point of the CSS print out is to take advantage of the whole page, not to waste any of it with unnecessary content, and to allow people to print directly from their browser, rather than having to find a separate printer friendly page.
= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
As always, any comments, questions, and especially corrections are welcome.