With technology and media heading towards a print-free lifestyle, we still need to style the web for print media. If there is a large amount of information viewed on a webpage, some people still enjoy the option of printing a “hard copy” and taking it on-the-go with them.
There are currently ten defined CSS media types: all, aural, braille, embossed, handheld, print, projection, screen, tty, and tv. Each media declaration allows web layouts to be presented differently to users, from handheld devices to web screens.
The main focus of today’s topic is print. Developers should keep in mind how to restyle for print as they are creating their designs for a new website. A web layout may look great on-screen, but it may not be print friendly. The print style sheet overrides the normal screen layout styles without adding anything extra to the screen layouts.
Tips and best practices:
- A simple rule of thumb is to display only what is needed.
- Remove headers, top navigations, sidebars, images, footers.
display: none;works wonders. The logo and contact information from the footer should be the only exception. - Enlarge the content area by expanding the width to 100%, resetting the margins and floats to 0 and none.
- Reset the background color to white and content area to transparent.
- Reset text colors to dark gray, especially after resetting background colors. Light colored text will be invisible or harder to see on a white background.
- Reset font size to 12 points. Default browser font size is 16 points.
- Reset font family to serif fonts since it’s easier to read on paper. Georgia or Times New Roman are preferable.
- Make links bolder, underlined and declare it to have a blue or red color.
- Display link destinations so the reader can see what the urls are on paper.
a:link:after a:visited:after { content: " (" attr(href) ") ";} - If there is a blog with pages of comments, you can break the comments into pages.
#comments {page-break-before: always;}
How to set it up?
Declare your print style sheet in the head section of your html page as you normally would. Add the media = “print” to the declaration for print only specification.