Aliso the Geek » CSS http://alisothegeek.com Eliminating excuses for crappy code. Sun, 18 Jul 2010 18:51:17 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 How to make a great print stylesheet http://alisothegeek.com/2010/01/23/how-to-make-a-great-print-stylesheet/ http://alisothegeek.com/2010/01/23/how-to-make-a-great-print-stylesheet/#comments Sat, 23 Jan 2010 22:58:00 +0000 Alison http://alisothegeek.com/?p=521

I just finished making a new print stylesheet for AlisotheGeek.com. For any website with a sidebar or a background image, print stylesheets are essential. Using “File » Print” is so much more intuitive for users than searching for a “Print this page” button on a website, and creating print-friendly versions of all your pages is a tedious, time-consuming task (especially if you have a blog). A print stylesheet is an elegant alternative.

Set up a print stylesheet

For those who don’t know how to make a print-specific stylesheet, it just takes the addition of one attribute to your CSS links in the <head> section of your site:

<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

The “media” attribute tells the browser to pay attention to stylesheets only in those situations. Add ‘media=”print”‘ to your stylesheet link for a print stylesheet. If the “media” attribute is left out, that stylesheet is called in all display situations, including print.

Hide unnecessary information with display: none

In the case of my website, I decided to hide things like the sidebar, the email subscription form, and the social media/bookmarking links at the end of each post. Do this with a simple display: none; at the top of your stylesheet. The user isn’t trying to print out your sidebar; they’re trying to print the article they just read.

Add back any global styles to make your printed page match your website

This step is only necessary if you left your main stylesheet out of the mix for printed pages. You will probably want your fonts to be the same on paper as they are on a screen, so make sure to re-insert those styles in your print stylesheet. The same goes for classes that apply global formatting to elements, such as floating images left or right.

Add extra information to your website to display only in printed pages

On my website, you’ll notice that the only thing in the footer is the copyright statement. When it’s printed, the URL “alisothegeek.com” appears in the right side of the footer. This is something I added in my footer (you can see it in the source code) and I set it to hide in my main stylesheet, but not my print stylesheet. Things like this can give a little extra clarity to users who print an article and later forget where it came from.

Also, the header on my site is one giant background image, with no text. Many modern browsers automatically turn off background images when they print pages, in order to save ink or toner. For the benefit of a user printing my site (and for the benefit of screen readers & search engines) I do have text in the header of my site, and CSS is hiding it on the screen. This way, it shows up on printed pages but not in the browser. I also added my logo next to that text using an <img> tag so it would still print.

Make hyperlinks useful on a printed page

Printing out a hyperlink is just like printing out text that’s underlined. It means no more to the reader than regular formatted text. To keep hyperlinks useful on a printed page, I added this code to my CSS (taken and modified from this article at A List Apart):

.entry a:after {
     content: " [" attr(href) "]";
     font-size: 80%;
     font-weight: normal;
}

This adds the URL after each hyperlink in my post’s content (which is div class="entry") in slightly smaller font surrounded by square brackets. This way, a printed article still retains the benefits of its hyperlinks.

Make final touches to keep it looking classy

Take some time and print out some test pages. Make formatting tweaks as necessary to make sure you didn’t miss anything from your main stylesheet that you want to keep in printed form. Add padding or margin where it will help things look nicer. For many websites, a printed page is a lot wider than the main content area is on the screen, so take that into consideration as well.

I hope this post helps some website builders out there with print stylesheet creation. It’s something that is often overlooked in website design, but something users really appreciate when it’s done right. Happy coding!

Related Posts

]]> http://alisothegeek.com/2010/01/23/how-to-make-a-great-print-stylesheet/feed/ 0 Fugue Sprite background-positioning fixed http://alisothegeek.com/2009/10/30/fugue-sprite-background-positioning-fixed/ http://alisothegeek.com/2009/10/30/fugue-sprite-background-positioning-fixed/#comments Fri, 30 Oct 2009 19:53:08 +0000 Alison http://alisothegeek.com/?p=472

A friend alerted me to the fact that some browsers weren’t showing the Fugue Sprite properly: everything was showing up as the topmost icon in the image (for example, the first 100 sprites all had the Address Book icon).

I did fix it, and I uploaded the new CSS to both my demo page and the ZIP file. Enjoy!

Fugue Sprite CSS (684 KB)

Related Posts

]]> http://alisothegeek.com/2009/10/30/fugue-sprite-background-positioning-fixed/feed/ 0 Fugue Sprite CSS http://alisothegeek.com/2009/10/23/fugue-sprite-css/ http://alisothegeek.com/2009/10/23/fugue-sprite-css/#comments Sat, 24 Oct 2009 01:09:21 +0000 Alison http://alisothegeek.com/?p=462

Any Blueprint users out there have probably heard of SilkSprite, a plugin for Blueprint that provides easy access to the entire Silk Icon Set from famfamfam. It’s basically a CSS file and a single image that you can use in any website, whether or not you use Blueprint.

I came across the Fugue icon set a few months ago, and I’m using is often enough that I decided to make something similar to the SilkSprite. I created the Fugue Sprite: a CSS file & set of images that provides easy access to all 2,330 Fugue icons.

To use it, just unzip the file and upload that folder to your server. Then link to the stylesheet. Voilà! Now you can use the Fugue class names on any element in your website to give it a left-aligned background of that Fugue icon, with 20 pixels of padding on the left.

Make sure the images stay in the same folder as the stylesheet.

The Fugue icon set is released under the Creative Commons Attribution 3.0 license, so if you use it, be sure to provide a link back to Pinvoke giving them credit for the icons. Enjoy!

Fugue Sprite CSS (684 KB)

View the complete set of icons & classes.

Related Posts

]]> http://alisothegeek.com/2009/10/23/fugue-sprite-css/feed/ 7