You’ve crafted an amazing responsive design for your Web application’s pages. You might have even covered mobile, but did you remember print? Make sure your pages look great everywhere with these ten quick tips.
1. Use Media Queries to Create Print Targeted CSS
Media queries are a quick, easy way to declare a block of CSS that will only be applied when a web page is viewed by a certain kind of media. Most commonly in modern web design these are used to target CSS to different screen resolutions but it can also be applied to print.
@media print {
BODY {
color:black;
}
}
2. Disable Navigation and Other Elements You Don’t Want Printed
This builds on what you can do using media queries. Your site’s navigation is useful on screen but when printed isn’t very valuable. Disable it using CSS enabled by a media query.
@media print {
#YourNavigation { display:none; }
}
3. Stay Away from Solid Color Areas
Modern web design frequently uses rich colored backgrounds with lighter text and other effects to create a beautiful experience. In print, however, the more solid blocks of color you use can cause plain paper to become saturated.
As much as possible, try to stick with black text on a white background and save your punches of color for the charts, graphs and images in your document.
4. For Black and White, use Pure Black and Pure White
Modern web design usually uses a “not quite black” color for most blacks such as #333333. This looks very nice on a screen and comes across far less harsh than a solid black. Unfortunately in print, this can result in less crisp appearing text depending on the kind of printer used. On some printers it can even come out appearing jagged.
When designing for print, it is best to stick with pure black (#000000) on pure white (#FFFFFF).
5. Use Points Instead of Pixels for Text Sizing
On screen, many developers utilize pixel sizes (font-size:14px;) for their fonts to insure the text is proportional to the images on their page. In print, pixel sized fonts can appear either as their true pixel size or depending on the browser automatically sized to what the browser maker’s best guess is for what you wanted to print.
For this reason, it is best to use point sizes (font-size:10pt) when you print. This will make sure your fonts are readable, consistently sized and using the best resolution the printer can offer.
6. Remove Underlines from Links
On screen, links are an essential part of the web experience. On a printed page, they do not provide any value. Remove the underlines from your links by using a media query and set the text-decoration property to none.
@media print {
a { text-decoration:none; }
}
7. Show the URL
If your page would benefit from showing the URL in printed form, you can use the css pseudo class “after” to add the link to your page.
a:after {
content: " (" attr(href) ") ";
}
8. Page Breaks
HTML tables only make sense when the user can see the headers that label the data. Make sure you don’t end up with your table broken in half by using the page-break-before:avoid; CSS rule.
table{page-break-inside:avoid}
9. @Page
The @Page selector allows you to define CSS that applies to the printed page’s layout. You can define the margins, padding and more. This element is supported by IE9+, Chrome, and most recently Firefox 19.
@Page {
margin:0.5in;
}
10. @Page Widows and Orphans
The orphans property sets the minimum number of lines that have to be left at the bottom of the page before it should be page broken to move the whole paragraph to the next page. The windows property does the same thing for paragraphs at the top of the page. The purpose of these two properties is to avoid scenarios where a paragraph breaks awkwardly.
About the Author:
David Talbot has over 14 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com
