Todays post is sponsored by: Web Inspiration.

Sometimes we are so interested in the content of a webpage, to people like me with a really bad memory is a good idea to print a webpage so I we can see it later. There are times when we can just copy and paste the information in Word and then print it, but even then there are a lot of unuseful things in the text (links, images, etc.). So I ask myself, why don’t we make a website that is easy to print? Well, here’s how.

Well, to achieve it the first thing we have to do is understand something. The best print format is black text on a white background. No images, no settled sizes (a pixel size is not the same in a 8.5×11 page than in a 1024×768 screen. So let’s make a change in the same page to make it “printable”.

STYLESHEETS

The necessary attribute is “media”. There are to values that we’ll be using, ’screen’ and ‘print’. So our css stylesheets would be listed as this:

<style rel=”stylesheet” type=”text/css” href=”css/screen.css” media=”screen” />
<style rel=”stylesheet” type=”text/css” href=”css/print.css” media=”print” />

This way, the screen view will take the values in the “screen.css” stylesheet and the print view will take the “print.css” values. Now, why 2 css and how to change the page to each one?

A GOOD EXAMPLE

The answer is easy, in print.css we should change the definitions of our screen.css to make the page take the format I told you before, something like a print paper, so a <div> tag will look like this:

div {
background-color:#303030;
color:#efefef;
width:340px;
height:150px;
margin:15px;
}

The same <div> on the print.css should look like this:

div {
background-color:#fff;
color:#000;
width:100%;
height:100%;
}

In this example we can see how we have changed hte background and foreground to the aforementioned format (bacl text on a white background). We have also changed the divs to have 100% width and height (remember that the measures in screen and print page are not the same).

IMAGES IN THE PRINT

Now, if we have images in our text and we don’t want them to print (ads or some navigation elements), we should leave only the images that make a reference to the text, we must use an attribute to display those elements, ie:

.ads { display:none; }

With this the ads will not display on the print page. You can use it to hide any element that you don’t like to be visible in the print.

I’d like to remember that those declarations will only be visible when you print the page, not in your screen (thanks to the attribute “media”).

Well, see you the next time!