That subset of Unbecoming Levity readers who bitched and complained noted that articles don't print very well will be happy to know that U-Lev should no longer abuse their printers. ![]()
CSS is cool. Today I learned that you can specify media-specific CSS links so that your page can look one way on a monitor, but another way in print, or on a handheld device. My thanks to the administrators and other members of BlogHarbor for pointing out this information.
Basically I just made a copy of the standard U-Lev stylesheet and then edited it until I liked what I saw. Then I saved it under another name (printer_friendly.css) and added this link to my <HEAD> tag:
<LINK rel="stylesheet" type="text/css" href="printer_friendly.css" media="print">
That "media" attribute is what specifies that this stylesheet should only be used for certain media, in this case printed output.
Modifying the stylesheet was very easy. To hide classes you don't want to see, you simply add the style "display: none" to the class, and the anything of that class will be omitted. Piece of cake. The only other things to change were to drop some borders, padding, and margins, change some subtly different colors to simple black and white, and set a fixed width to the content which should make it wrap properly for most printers (I chose 6.5 inches, which was recommended.)
If your browser recognizes and handles media-specific stylesheets, this should allow you to print U-Lev articles without the sidebars, comments form, and excess margins. If your browser has a "Print Preview" function, you can get an idea of how articles will look when printed. If your browser doesn't offer print preview, I've included a (reduced size) screenshot at right.
Sorry for beating up your printer!
Bibliography:
- BlogHarbor General Discussion Forum - Printer Friendly?
- A List Apart: Print it Your Way
- A List Apart: CSS Design -- Going to Print
- meyerweb.com: Print Different

Search
Recent Comments




