CSS print style sheet

April 11, 2005 / Filed under: CSS

My print style sheet has been in effect for quite some time.

For example, try printing this blog entry page, or just "print preview" it.

You’ll notice the elimination of margins, padding, images, and much more. Also, the font is converted to "Times New Roman," which is easier to read, on paper.

Links spelled out

For links contained within an entry (if there are any), I utilize the CSS pseudo–class after, which is applied like so:

#content a:link:after,
#content a:visited:after
{

content: " (" attr(href) ") ";
}

This will, on paper, spell out each link, in parenthesis, next to the actual link.

Unfortunately, this is only supported in CSS 2, which is not Internet Explorer. The good part is... since IE doesn’t support it – it simply ignores it, which is fine, for now.

If you print this blog entry from IE, the links within the entry will just appear underlined (but you won’t know where they point to).

Why print

I usually tend not to print web pages – although the need does come up, every so often.

If there is a relatively good blog entry at someone’s site, and I am strapped for time, at the given moment – I will quickly print the blog entry (comments included), to absorb somewhere else – perhaps on a beach with a beer.

The point is... computers are often quite limited, in terms of proximity.

I have my cell phone set up to receive email and RSS feeds, so often times I will continue an article on my phone.

However, my phone being so small – it lacks genuine interaction.

Other

I like "testing" other people’s web pages (or blogs), to see if a print style sheet has been set up.

The benefits of setting one up are pretty obvious.

Without a print style sheet, you will get images, columns, and horrible spacing issues. This is not an ideal use of time, paper, or printer ink.

Comments/Mentions