Thursday, November 8, 2007

Making your Struturo pages print nicely

Printer friendly is nice but what's even nicer is producing a good result even if the user just chooses File\Print from the menu while viewing a page.

Here's a tip that we use that works really well across browsers. Using style sheets for page layout is great but doing so typically requires fixed width layout to look nice on screen. The problem is that most of the time the page is set to a width that looks nice on the screen but when printing it's too wide.

This article describes a page that only has one navigator column on the left and a content area on the right. But you can take this concept to a three column page as well.

Use percentages that match your column width ratios

The simplest way to produce a nice printed result is to create the print styles with percentages that match closely to the pixel widths defined in the screen version. So, for example, if your left column is 250 pixels and your main column content column is 700 pixels for a total of 950 pixels then you can make an assumption that the left column is approximately 25% of the entire width. You don't have to be perfect here. So, in your print styles, you would specify that column1 (#col1) is 25% with in the main column (#main) is 75% width.

Editing the theme document for print styles

FYI - Not showing all the print CSS. We cut it down to focus on the point of the article.

Easy. Works well cross-browser.

What's nice about this solution is depending on what browser the user's have, the maximum width in pixels varies. So it's hard to be 100% sure that if you set a fixed pixel width overall that you're going to get a decent result across those browsers.

Tip: Exclude background graphics

The other thing that we like to do is exclude background graphics from printing, so if column 1 has a background graphic on it we would typically set the background to white and similarly with the main column (if it has background graphics). Also if there is any content pushed down to account for that graphic, you have to adjust the margin or padding on the top to make a print nicely without the graphic.

Here's what it looks like on the screen

Here's an example that we were working on today. The logo is blurred now because this site is yet to be announced. Also, note the content is totally fake right now. Just copied what was in the template file for now until they get the real content in there.

Print preview in Firefox

A bit blurry because this is the screen capture from the print preview. But looks nice.