I have a suspicion that print versions of webpages are a bit of a niche market. Nevertheless, they provide a reasonable testing ground for certain client side features that don’t get a lot of use in the screen medium.
For the print version of joeblade articles, I decided to use CSS columns. Here’s a screenshot of the on screen layout of my review of the film Moon:
Here’s a screenshot of the print version:
There’s a few things going on there, including some judicious use of text-indent, :first-child and a smattering of sibling selectors, plus the use of a serif font in place of a sans-serif (first choice is Goudy Old Style, followed by Georgia). The CSS for the two columns is simple:
div#article-content {
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-gap: 30px;
-webkit-column-gap: 20px;
font-size: 16px;
line-height: 1.6;
width: 760px;
}
Currently only supported in Mozilla and Webkit, and then only with the -moz and -webkit prefixes, non-supporting browsers simply get a wider, single column instead of two. A further limitation is that Webkit doesn’t actually support this in print mode (but it does in screen mode) but I’ve left the code in case it gets fixed in a future update.
You can see live examples at joeblade.com. It’s a bit rough around the edges at the moment, particularly when there are images or other media within the body of the article but I think for the most part it works pretty well. For instance, in this article on Ridley Scott and James Cameron’s return to science fiction, there are some images that span the width of the content. For the print version, I shrink them down to half their size and the content flows nicely around them. However, the captions look crap, so that’s something I need to fix still.
Further reading:
- Multi-column layout at css3.info
- CSS3 module: Multi-column layout
- A List Apart: Introducing CSS3 Multi-column module
Just jumped by to give you a big pad on the back. You are right, the print-versions of most sites are — if they exist at all — rather boring, unformatted and most of the time paper-wasting.
I don’t know if it’s a niche, but it sure could round of a website design so you can call the job “complete”!
So, good point you made there.
Hmmm, I’m gonna check for your print-version right now, just because you made me curious enough to see if you allready jumped into the niche yourself. ;)