Matthew Knott

In any information-based website, it's important to remember that people will possibly want to print your information off. 

This could be for any number of reasons, passing to a friend, saving for your own purposes, or supporting a business case to buy a product.

When they do, they will get a mess, bits of navigation, images, cut off text. The end result is you or your customer lose business, or look unprofessional.

To fix this, use a print stylesheet. A print stylesheet is used only when printing and lets you sweep navigation and other unwanted information under the carpet.

If you're viewing this article on it's own, go to print preview and see what happens. All the navigational elements go and you're left with a nicely formatted document ready to print (Aside from the google ads which I haven't hidden yet).

Creating a print stylesheet should be the last thing you do, that way you're not constantly changing it through the project lifecycle.

When you are ready to implement your stylesheet you can add it in one of two ways. To include the stylesheet using the LINK object:

<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

Or to use inline styles use:

@media print {

/* style sheet for print goes here */

}

Either way achieves the same result. When compiling your print stylesheet, use display:none; to hide individual elements. 

Ensure any content containing div's are set to full width so that the full page is utilised.

Finally, consider colours, not all browsers allow background printing, you should bear this in mind. Minimise the use of colours in your page to improve the reproduction on laser printers.

Providing a drastic change from screen to page can set you apart from competitors and give you that slight edge. It's a little detail that can make a big difference.

Tags: Tutorial Stylesheet css display Print Professional Hidden

I wanted to create a tag cloud, and looked at Cal Evans's Cloud Generator, which to me seemed overly complex, though very stable I'm sure. I just thought that it would be easier to work it out myself and tailor the solution to my needs.

It was actually easier to do than I thought.

1. I run a query against the top 20 tags, returning the tag name, and usage tally, ordered alphabetically.
2. I loop the results, adding them to two separate arrays, and calculate the maximum usage and minimum usage.
3. Now I have the maximum usage value, I calcululate each usage as a percentage of the maximum, which I use to give the tag a rank 1-5. 0% - 19% is rank 1, 20% - 39% is rank 2 and so on.
4. The tag is output as <span class="tag_rank_1"><a href="tagurl">Tag Name</a></span>
5. In the stylesheet I set the styles I want for each rank such as darkening and enlargement of the font.

Click here for the source code.

Tags: PHP Tutorial Tags Blog Cloud Stylesheet