So You Want A Printable Page, Huh?

By Joe Burns

Use these to jump around or read it all...

[What Do You Want to Print?]
[How Do You Want It To Print?]
[Get That Format]
[A Color Rule]
[Typography Concerns]
[Page Breaks]

This is an extremely popular thing to have these days. Many of my favorite Websites, including all the great sites owned by Earthweb and Internet.com, are offering "printable" versions of their pages.

Times were that if you wanted to print a page, you simply printed the page. That meant also printing all the banner ads, other links, and maybe even the background. That just killed those expensive three-color cartridges. Now, in order to assist surfers who print, often you'll see a little icon of a printer that claims to send you to a more "printable" page. Usually that means just the text, maybe one banner ad, and a couple of links down at the bottom.

I've been getting some letters lately asking what should be done in order to create a printable page so I did some checking. Here are the results of that search.

What Do You Want to Print?

First off, answer the big question. What do you want to print? I don't mean what text. I think we can all agree that it's the text of the page that you want to print. The question is, do you want just the text or do you want other elements?

Often, sites put a banner ad at the top or the bottom of the printable page. That's up to you. My suggestion, and the results of my research into the subject, warns you away from offering anything but the text of the article. The thinking goes that I looked at your banner ads on the original page. You offered me a page to print. Please don't give me more than I asked for.

I would specifically watch putting any format text like, "This page formatted to print in [browser]" or "This page will print best in IE," or "Print this page in Landscape," or internal page links. In fact, any links! The user cannot use the links from a printed page.

The only element I would add to the printable page would be a reference cite, like you would find in the reference section of a research paper. I would even make a point of putting the cite first. Follow a basic format like A.P.A. so someone who prints the page can easily cite you in a paper or article. Plus...by putting a cite on your page, you mark it as yours. That's a smart thing to do.

Other than that - think long and hard about putting anything other than the text of the page on a printable page.

How Do You Want it to Print?

When I began searching around for answers, this was the question most prominent in my mind. You see, many of the printable pages I have seen do not take format into account. For the most part, the printable page is just text, running all the way across the page. What prints actually doesn't render like it appears on the screen. Furthermore, if the user has an older printer, the paragraphs won't stay in nice tight compact groups. The lines will truncate and you'll get that lovely long line, short line, long line, short line format.


Let me suggest that if you offer a printable page that you format the page to display, and thus print, in a format that can be easily transferred to printer.

You would be amazed at how many different formats people proclaim will be successful when printing. There are any number of characters and lines and fonts and something per inch that you can get into. After going through them all, here are what I consider the parameters most likely to produce a successful print.

  • No more than 65 characters (including spaces) per line.
  • No more than 66 lines per page.

Yes, I saw the statements that one can get away with 70, or even 72, characters per line. I chose the parameters above because they came from the copy rules of a direct marketing firm. Their research found that we humans are most happy with 65 characters in 66 lines.

In addition, those numbers fall within the default print ranges of just about any printer from the expensive laser printer all the way down to the lowly 16-pin dot matrix.

These rules are taking into consideration that you are using a combination of upper and lower case letters and that the user has their browser set to the default settings. If you run into a person who has their text set to 24 pt., you're kind of dead no matter what you do. The print is going to look crummy. The rules change somewhat if you write in all lowercase or all upper case. In my WORD program I was able to get 91 lowercase characters in the same space only 64 uppercase characters would fit. I used Times New Roman font, the overwhelming default font used today.

The one thing you never want to do is to offer a user just a simple text version of your page. I have seen printable pages that are little more than a copy and paste of the text then saved in .txt format. That looks terrible and doesn't print well at all.

You will need to do some formatting.

Get That Format

In looking for methods of setting text to a specific width, I found a lot of tips and tricks that just do not work. For example:

One site claimed that putting the style attribute: STYLE="width:50ex" in the page's body command would set the number of letters across a page to 50, or whatever you set the number to be. It displays only in Netscape Navigator, and I mean it displays. Try printing it. Big problems.

Another site proclaimed you could force the page to print in Landscape by adding the command: <PAGESIZE ORIENTATION="landscape">. You're a better person than I am if you can get it to work. I tried it all over the page. No dice. There is a command similar to this in UNIX, but I couldn't get the effect.

So what?

So what? So there! I'm simply pointing out that most of the fancy coding or altering of the person's browser will not work. If you are going to offer a printable page, you need to play to the lowest common printer denominator. Don't offer a page that must print in landscape. Redesign it so that the page will print in the more common profile format.

The best method I've found for creating a printable page is a simple table cell set to 400 pixels wide. The basic code of the page will look something like this:


Text to be printed here


The simplest coding is always the best and is always understood by the largest number of browsers. I can get the exact same effect by using Style Sheet commands, but why? This is much easier and much more browser friendly.

A Color Rule

Yes, yes, I know your page is olive green with fuchsia highlights over an off-yellow body of text that melds politely with a mauve glisten of lime tones. However...

Your printable page should probably be black text on a white background.

I think that about covers it.

Typography Concerns

When you create your printable page, you'll want to keep the major typography. By that I mean the headers, the paragraph structure, and any other text placement. For instance, if you have a list on the main page, you'll keep that list format on the printable page.

I do not think that text decoration should carry over unless it is absolutely required. Bold and underline are not big offenders. They will both print pretty well. It's the italic text you should avoid. It just doesn't print very well, especially on earlier model printers.

I don't want to go as far as to say to never use italic, but I'd like to come close. If you use italic on your Web page, go with quotes or underline on the printable page.

Watch also offering a page that has text set to a lower point setting than the default. If you have negative one or two font text on the main page, try to lose that on the printable page.

I would also try to keep all of the text in the same font on the print page. It just gives a more uniform look.

Basically, the printable page should be uniform in format to the original page, yet should be less ornate. Go bland. The user is printing because he or she wants the content, not the design. If they wanted the design they would have printed the original page.


Page Breaks

OK, here's a tricky one. I read a site that stated you should make a point of incorporating page breaks into your printable pages. As far as I can think, there are two basic methods of getting the page breaks. The first is to design your printable pages and then add "white space" where the page would naturally break.

You can get the effect by adding <BR> commands where the page would naturally break. Just keep checking your work in the Print Preview sections of Netscape and Internet Explorer. I tried it. You'll have to add a little extra space where the page breaks, but it's not that hard to get.

The second method is to use the Style Sheet page-break-after format. This is actually the lesser of the two choices in that it only works in Internet Explorer. Plus it's difficult to set it to break at a certain point rather than just at a heading format. I have an entire tutorial on it right here.

So which do you use? Well, in all honesty, unless the page breaks really matter, neither. I don't know that page breaks are overly important. The only real concerns are if an important section is disrupted by a page break or if the page break format is crucial to the format (like a manuscript or book format).

If the page breaks are that important to the piece, then maybe you'll want to offer the piece as a download in WORD or as an Adobe Acrobat format.

If you do decide to go with the page breaks and don't want the WORD or Adobe format, I would suggest the creation of white space is your best bet.

That's That

If you are going to offer a printable page, understand that you are going to create more work for yourself. You'll not only have to create the original page, but also its printable equal. And...as your parents have told you one too many times, "If you going to do something, do it right."

If you offer someone the ability to print your page, then make it so that the page will print correctly over the largest number of browsers.

Following the suggestions I have laid out here, the printable version of this page would look like this. I tried setting white space for the page breaks. The entire process took me about seven minutes.


[What Do You Want to Print?]
[How Do You Want It To Print?]
[Get That Format]
[A Color Rule]
[Typography Concerns]
[Page Breaks]

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date