CSS-Tricks Finally Gets A Print Stylesheet - CSS-Tricks

CSS-Tricks Finally Gets A Print Stylesheet - CSS-Tricks - 記錄一些對 print style 的想法, 相當值得參考

body {
 font-family: Georgia, serif;
 background: none;
 color: black;
}

page {
 width: 100%;
 margin: 0; padding: 0;
 background: none;
}

#header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
 display: none;
}

.entry a:after {
 content: " [" attr(href) "] ";
}

#printed-article {
 border: 1px solid #666;
 padding: 10px;
}

1. Make the type as readable as possible
On the web, the body type for articles here is a sans-serif. On the printed page, I think that serif fonts are easier to read so I reset the font-family to Georgia. No background and black text is the default, but just in case, I explicitly declare it in the body.

2. Use as much of the page as possible
Again, I think this is default behavior, but since I wrap my content in a "page" tag anyway I thought I would make use of that to set a 100% width and remove any margin and padding.

3. Remove the extra stuff
Chances are, if someone is printing an article of yours it is because they want to save the content as reference material, read it later, or share it with a friend. They really don’t need to see your page navigation, sidebar, or fancy footer. Again assuming that you have nice and semantically marked up code, removing those sections should be as easy as setting the display value of the parent elements of those areas to none.

4. Display the URLs in the body content
[Thanks to David Walsh for this idea] Links in your content don’t do any good on the printed page. It would be pretty cool if you could just tap the linked word with your finger and it would open the webpage on your computer, but thats something I haven’t even seen in the movies yet. For now, we can just use CSS pseudo class “:after” to drop in the URL right next to the link, using the content attribute. IE doesn’t support it, but c'est la vie.

5. Include a thank-you note
At the end of my content, I put a little "thank you" note. This area gets hidden on the web, but is displayed when printing the article. I think it’s just a nice touch and also serves as a reminder they should come back to the website for fresh stuff.

6. Optional: Page breaks
I didn’t feel my articles really warranted specific page breaks, but if you write really long articles with sub headers, you should definitely consider placing page breaks before each of those sub headers. Another place that would be good to use a page break is right before a fairly large table. Nothing is worse than having to flip between pages looking at a table because it happened to fall overlapping two pages when it could have fit onto one. I plan to use these on a case-by-case basis. More on page breaks here.