Question for non-top-experts only #6

There are two ways i know of doing this. one of the ways is to have tublicits of all of the pages that you want to be printable then have a link to that page on the page that it is a printable version of. another way that i know of doing to is have on page that is PHP or ASP or some other codding language and have it so that is configures the page you just came from and then show the page the way you want it to be shown. i hope that is good enough.

Hi CD,

In agreement with jAy (and W3C<g>), CSS will be a good choice in many cases but it requires the (HTML-)document to be well designed in the meaning of structure.

If the screen display is already heavily based on CSS only (no hacks like nested tables, 1px GIFs etc. are involved) it's quiet easily possibe to create a different layout based on CSS as well. How this works (or should work) is well explained in the article jAy posted.
As long as the audience is using a modern browser, this works pretty well.

Unfortunately CSS may not always be an option, that is either the audience is known of _not_ using a compliant CSS2 browser (one that does not "know" what media="print" is supposed to do) or the document *content* for screen and print MUST differ for whatever reason.
In this case an individually "shaped" document/page for each media (WAP/WML, print, screen, tty) is required, whereas 'individual' does not mean having a separate file for each on the server.

Living in a world that knows all those nice and powerful server-side scripting languages (ASP, PHP, JSP, CFM, Perl, Python; you name it), it is fairly possible to _separate content from design_ and create such individual documents on the fly. Many database driven sites are nothing but a couple of scripts that deliver thousands of different pages, none of them existing physically on the server--in a cache at best. They may as well be used to make CSS1 browsers use another style sheet for printing giving them an alterate URL. Technically this can be done in various ways.

The easiest way--or should I say the more flexible way--in "separating content and design", would be using XML documents with XSLT. Both allow the developer--and designer--to create as many layouts as necessary, based on the requested target media. Delivering such pages may be solved using alternate URL as mentioned above.

But even more than HTML+CSS, XML+XSLT requires this separation making it more powerful at the same time.
Unlike CSS, XSLT is not limited to produce (X)HTML pages for a browser as the result of its transformation(!), but *real* printable "documents" like PDF and others. The question here is: can a PDF file be treated as a WEB page?
Because of its ability in TRANSFORMING the original content-document, it's possible to remove or add content to the resulting document, something CSS is not able to do -- the CSS2 'content' and 'display' statements are too limited to be competitors.

Conclusion?
As with many other things, there's no it-has-to-be-done-this-way-only. It depends on how the (original) content is organized, what it's source is like (file, database...), and maybe more: who's responsible for creating the printable page (client, server).

Luckily most recent browsers (versions 6 and up) are getting better in handling both CSS2 and XML/XSLT to do the job.
What a bright future it could be, if they'd do it the similar :-)

Thanx for reading.
CirTap

The best way is to use style sheets and specify the media type. One for 'display' and a different one for 'print'.

I had a page that had colored text, graphics, and bunch of other stuff on it that printed like garbage on a B&W laser printer. I changed everything to be Black and White, rearranged certain <DIV> positions, and made some graphics hidden. Things looked much better then.

You can also do the same for different media as well, such as braille readers.

i thought of doing this on my site but i realized it would take way to long.  you could put all of the stuff that doesnt needed to be printed into the background.  like www.mohonasen.org  website's header is actually in the background.  most browsers are set to not print the background so it would only print the text on the page.  you could use <AREA> to link your pages without actually puting that image on the page.  i didnt read all of the other suggestions but theirs are probably much better than mine.  Matt :-)

Use .PDF for anything worthwhile printing off the internet.

I agree with kohashi. Use PDF. Have a HTML version of the page with an option to download a PDF version. Ok, its a duplication of work, time etc but the document is ready formatted and will print alot better than a web page no matter what u have done to the page

Michael

PDF is not always a viable option for printing off the web.  Although it is a great option for posting large multipage documents that would take forever to HTMLisize.

Ok..  page width...  I would recommend no larger than 700px wide.  You can center it or do anything like that, but I would stick with 700 wide.  The reason:  When you print off a webpage, the predetermined page settings is approx. 700px.  So there won't be any missing text, images, etc.  Thus, the end user wouldn't need to fiddle with page settings, or switching it to print to a landscape format.

Page height, makes no difference, but I would try to keep it to under 5 page printed.  This isn't always possible depending on the content for the page, although you could always have a "next page" button.

Background:  If being printer-friendly is a big concern, I would stick with as much white as possible.  so make your bg. white .

I would also recommend using a dynamic web language, php, asp, xml, etc.  Thus you can easily create "text-only" versions of the page, by simply creating a new set of templates.  This makes the ultimate "printer-friendly" website.

Just my thoughts...

cd&,

  here is an article that i ran across, that might be helpful.

Make your web page design printer friendly


Reading text on a computer screen is more difficult and slower than reading a printed page. Tests have shown that people read text on a monitor approximately 20% slower than print. Therefore many people print web pages and read them offline.
 
You should always be sure to make your web page design is printer friendly. Here are some pointers to check your web page design.

Keep your page widths to 600 pixels or less.
The biggest problem with most pages is that they are designed for larger monitors and thus too wide for print. If your page is too wide the printer will cut off the right hand side.
Don't use background images that are important to the content of a page.
For the most part background images don't display in the print version of a page design. Foreground images will display.
Make a button for frames web designs to open a printable page in another window.
Frames may not print the way you want on some browsers. Sometime the entire frameset is printed, sometime on the main content page is printed. This issue can be resolved by opening another window with only the content you want printed.
If your printer friendly web page designs don't look the way you want on-screen, you can always create two pages, one for print and one for on-screen.
 
Always test your page designs to make sure they print properly.

jAy

This may sound elementary to some, but I always design my pages basically the same way, and as a result they are always printer friendly. I take creat care to design the site in a way which leaves the content that people would want to print on pages which are set out with tables and the table sizes are no more than 600px wide. The pages basically have no images just links, to keep them looking OK in newer browsers, I utilise CSS for Links but other than that the pages are free of design, I keep all the design in surrounding pages in frames. If we are to try and support non frame browsers these days, then I think we might as well have Fred Flintstone build our sites... I dont support frameless browsers, I am appealing to a modern audience.. I also include a simple Javascript print page button to ensure a viewer prints the page they are on. In the event that they dont use Java then they can find out how to print my pages in a help file I include on all sites....

I know that this is not a technically endowed answer, but it works, the pages are low on bandwidth, and I do this on our flat sites or db driven sights. Its just a kind of rule of thumb, no larger than 600px, and no background....

Hope this kind of answer is suitable.

shady

Being a news junkie who likes to write articles, I often have this trouble like you asked about.  I like to go to the news sites and save _and_ print the article, that way I can

1) with the save, easily quote and reference the article in my writings, because I can copy and paste, plus it's on my hard drive, and this is useful because all the news sites start charging for thier articles or change the links to it.

2) with the print, take it with me wherever i go and its easier to read (like on the toilet- its hard to take a desktop pc)

we've all seen the "printer friendly" versions of articles that basically link to a text file.  also, most know about the css media types, but these are tim consuming to implement.

what I would LOVE to see are <logo>, <menu>, <advert>, and <content> tags.  These tags would be "special" html or xml tags that a user could specify in his/her "internet settings".

For example, i could specify that when I choose "save as", or "select all", i could make it just take the content tag (as this would help me out most)... everyone could choose thier own way of dealing with the tags.  Set up the print function in browsers to only print things in the <content> tag...

that would be heaven for me.  in the mean time, i have to copy text before ads, in the middle of ads, and after ads just to avoid the ad.  that, or click the printer friendly link, and take a couple more minutes to download the info into that browser window.

Printing from a web page can provide extreme frustration to a user if the site is not designed correctly.  Here are a few design tips that can help ensure a more "printer friendly" webpage.

Frames Good or Evil?:
People continue to argue about the validity of using frames in a web page.  Some people seem to love frames while others tend to think they are pure evil.  However, if you are trying to create a printer friendly page, using frames is not recommended.  It is possible to get nice printed pages from frames.  However, it is often confusing to the user which section of the page will be printed.  Since only one frame can be printed at one time, the last accessed frame will be printed.  This provides an unnecessary confusion.

"Printer Friendly Pages":
A good way to ensure that the users will be able to print well formed HTML pages is to create a separate printer-friendly page.  We have all seen pages that use this technique.  A good example is found at http://www.mapquest.com, which allows the user to print the driving direction is well formatted manner.  

Smart Formatting:
Usually a printer friendly page is a stripped down version of the original page in a single column.  There needs to be minimum HTML formatting to help decrease the chance for strange data alignments, and line overflows.  To help avoid this overflow you want to try to keep the page as narrow as possible.  It is recommended to keep the width of tables and graphics under 550 pixels.  However, to be even more conservative use only HTML text with no tables fixing the page width.

Visibility:
Another problem often found in poorly designed web sites when it comes time to print, is the visibility of the content.  Some people like to use extravagant text colors, which do not print well at all.  The standard black text on a white background works the best.  Some older browsers do print the background color, which could cause problems.  Not everyone has a color printer, so the pages should not rely on the color outputs for communication.  

Know Your Content:
It is important to consider how the content of your page is going to be used.  Most printing is used for later reading.  Because of this you can strip out anything extra on the page (navigation, search boxes, ads...).  A lot of printers automatically print the URL address on the page, but it still would be a good idea to write out the URL to ensure that the user knows where the page came from.  Hyperlinks are useless in a printed document, and the change in color can be annoying in a print out.  You might want to consider just bolding the hyperlink to make it noticeable.  

Cascading Style Sheets:
Those are just some guidelines and techniques to help create a more printer friendly page.  It is possible to create a more sophisticated way to control the way the page looks when it is printed.  This is done by using CSS (Cascading Style Sheets).  CSS2 provides a way for a single document to be formatted on the fly depending on the device displaying it.  This eliminates the need to create a separate printer-friendly version on every page of your site.  However, not all browsers take advantage of the CCS2 specification.  This means you can not ensure that 100 percent of your audience will be able to use this technique.

Here is an example how to control the way the page looks.  This information was found in O'Reilly's Web Design in a Nutshell (5.3):

----------
In this simple example, I begin with a simple, yet properly tagged, HTML file that includes a navigational bar, a headline, and a few lines of text. (Structural tags have been omitted to save space, but they are implied.) I'll call this document sample.html.
<DIV class="navigation">
    <P><IMG src="navigation_bar.gif"></P>
</DIV>
<H1>Alternative Media Style Sheets</H1>
<P>With CSS2 you can create style sheets that are specific to a medium.
This enables on-the-fly formatting of the document.</P>
I now create a style sheet that specifies how I want my page to look on the screen. Just to be extreme, I've made my background black, my headline red and text gray. This style sheet is named browser.css.
BODY { background-color: black; }
H1 { color: red; font-family: impact; }
P { color: #999999; font-family: verdana; }
I also create a second style sheet that is better suited for a printout. I'd like all the text to be black on a white background. In addition, I don't want the navigation toolbar to appear, so I'll use the display selector to hide the div that contains the image. This style sheet is named print.css.
BODY { background-color: white;
       color: black;
       font-family: times; }
DIV.navigation { display: none;}

----------
You still need to link the style sheets to the HTML document.
I hope this information proves to be useful in your future web site development.  

-J-

For most situations I would recommend using the following:

CSS can direct a page to an alternative print document.  In the <head> section the syntax is -
<link rel=alternate media=print href="printDocument.*">

This allows you still maintain all usability and provide a flawless print copy.  Using this syntax also allows the client to print the page in any browser supported fashion instead of a hand written print button/link.
 

I think the best link I have ever found on information about Print specific style sheets is this one:

http://www.alistapart.com/stories/goingtoprint/

By far the best solution.

This is truly excellent.  Everyone in the thread has presented intelligent, professional approaches.  Not a single hack.  A lot of these types of threads end up containing truly stupid and sometimes dangerous suggestions.  It really pleases me to see that the for general solutions are all represented.

PDF
CSS
Server Side alternative versions
XML, XSLT

And there is a tone through out the thread that print quality starts with good general design.  This thread is OUTSTANDING!

In my work pages are 100% server side generated, so you might think I would favor the XML approach.  Not so.  I prefer the CSS approach, because we keep style sheets client side to give the users 100% control over presentation.  Content comes from the server, but presentation is client side.  Not very practical on the Internet, because of security limitations accessing local files, but beautiful on browser based apps on an intranet.  Completely eliminates the "can we get the color of this changed" requests, and allows the print version to be optimized for the local printer each user is using.


The quality of the posts makes it difficult to allocate points.  Every comment posted adds to the quality of the thread, but I have limited myself to awarding points to the 5 I think are the best.

I'm upping the points to 250 and accepting jAy's comment.  My CSS bias shows through there.

cirtap makes an excellent case for the method preferred by many, and what Will be the common approach on the Internet over time.  I'll post a 200 point Q.
Also a 200 point Q for MattrixDud for a really excellent link.
and:
JackNCalvin - 100
webmanager - 50


Be back in a minute with the links to the Qs.

Cd&

Okay points for Qs:

webmanager: https://www.experts-exchange.com/questions/20547117/points-for-webmanager.html
JackNCalvin: https://www.experts-exchange.com/questions/20547115/points-for-JackNCalvin.html
MattrixDud: https://www.experts-exchange.com/questions/20547114/points-for-MattrixDud.html
cirtap: https://www.experts-exchange.com/questions/20547112/points-for-cirtap.html

Thanks to all who participated.

Cd&

Thanks Cd&

I love participating in these questions.


Thanks a million

jAy