Print stylesheets

Let's say a user wants to print our page. What's going to happen? What about all of those "printer friendly page" links we see everywhere; do we really need them?

If we create a separate stylesheet for print, we'll be able to style things properly and differently for the printed page. This is an important consideration, as we probably don't want to keep our menus, background images, and the so on with the page. But we also might want to display our links in the text so that we can see them on the printed page.

The first thing we'd like to do is to remove the navigation div:

#nav {
    display: none;
}

We'd like to have our measure be a little longer than on the screen, but with a healthy left margin

body {
    width: 36em;
    margin-left: 3em;
}

Let's make our colors black on white:

body {
    width: 36em;
    margin-left: 3em;
    color: black;
    background-color: white;
}

Then, we should move our font sizes back to points, which are entirely appropriate for print:

h1 {
    font-size: 36pt; /* 36 pt / 16 pt = 2.25em */
}

h2 {
    font-size: 24pt; /* 24 pt / 16pt = 1.5em */
}

h3 {
    font-size: 18pt; /* 18 pt / 16 pt = 1.125em */
}

h4 {
    font-size: 14pt; /* 14 pt / 16 pt = 0.875em */
}

p {
    font-size: 12pt; /* 12 pt / 16 pt = 0.75em */
}

We should bring over our line height and margin calculations as well to ensure that the rhythm remains the same.

Then, we should make our links stand out a bit more:

a, a:visited {
    font-weight: bold;
}

Finally, we can use an advanced CSS pseudo selector to output the content of the href attribute after the link itself; this will allow the actual links to show up in the printed output:

a:link:after, a:visited:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
}

The following is just some example text for the printed output.

Testing header 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis enim ut est. Aliquam tellus velit, egestas sit amet, fermentum non, tincidunt eget, tellus. Nunc euismod, elit id tempor pretium, enim nisi feugiat lectus, eget consequat lectus neque vel leo. Pellentesque rhoncus, nisi nec rutrum condimentum, nisl eros mattis erat, ac aliquet nisi ligula sit amet quam. Vivamus fermentum nunc ac dolor. Suspendisse aliquam neque ac lacus. Aenean augue. Ut sit amet massa. Ut justo mauris, blandit id, vehicula non, pulvinar et, tellus. Morbi eget leo sed arcu rhoncus venenatis. Cras dolor. Nullam ipsum. Maecenas nunc ante, pharetra id, dapibus eu, condimentum vel, odio.

Phasellus mollis urna sed tellus. Sed tincidunt tincidunt sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut porta leo ut tellus. Proin ante neque, iaculis sit amet, feugiat sit amet, ullamcorper eu, nisl. Donec mauris sem, dictum ac, pellentesque a, faucibus lobortis, diam. Nunc imperdiet adipiscing ante. Vivamus quis nibh vitae sapien euismod egestas. Sed sodales laoreet mauris. Morbi viverra ipsum ac elit consequat tempus. Nulla facilisi. Praesent vestibulum imperdiet nisi. Curabitur sit amet turpis a lacus rutrum luctus. Etiam volutpat purus eu libero. Quisque a arcu et elit scelerisque elementum. Mauris nulla felis, placerat a, laoreet sed, interdum sed, orci.

Fusce sollicitudin erat sit amet elit tempus dapibus. Vestibulum rhoncus placerat risus. Mauris lacus urna, tincidunt eu, accumsan eu, aliquam et, dui. In vel quam. Maecenas mollis. In lorem augue, porta fringilla, porttitor sed, hendrerit quis, turpis. Cras turpis nisi, porta eget, ornare a, imperdiet vel, erat. Vivamus id eros. Curabitur sem felis, bibendum vitae, aliquam a, molestie eget, mi. In adipiscing.

Test header 2

Fusce sed urna quis ipsum laoreet ornare. Cras luctus arcu et eros. Sed posuere. Nam et leo. Sed eleifend. Sed massa nulla, dictum non, posuere at, aliquet id, ante. Fusce in purus eget metus ornare convallis. Cras aliquet. Vestibulum eleifend. Quisque pharetra quam ut metus. Pellentesque ullamcorper. Ut a mauris. Aliquam facilisis aliquet purus. Sed tristique blandit mauris.

Mauris egestas dolor eu ligula. Nunc tempor laoreet elit. Cras eu magna. Etiam varius. Donec quis purus. Donec ligula ipsum, rhoncus vel, eleifend id, fermentum sed, tortor. Quisque lobortis mollis nulla. In aliquet, massa vel varius mollis, tellus metus vestibulum dolor, a ultrices leo nulla eu urna. Proin purus risus, malesuada vel, euismod ac, commodo et, velit. Donec congue eros sed turpis. Curabitur pharetra, erat a egestas molestie, diam erat pellentesque urna, ut porttitor dui enim et dolor. Nunc pulvinar. Morbi tortor dui, posuere ut, hendrerit sit amet, lacinia at, massa. Mauris vitae lorem nec justo sagittis lacinia.