• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6657
  • Last Modified:

Printing web pages - maximum width - portrait size - using css - shrink to fit

I'm not even sure how to explain my problem .  I'm spinning in circles trying to get our newly redesigned web pages to print in portrait mode and look ok in handhelds and print in portrait via Adobe web capture.  

So here are a couple questions - maybe someone knows how to help me.

1.  I've heard that web browsers are only designed to print pages in portrait mode if they are 800 pixels wide or less.  Is this true?    If so, I guess I need to redesign the entire site to have only 800 pixel wide tables.

2.  When I do a print preview in Internet Explorer 7.0 - there is a drop down tab which says "shrink to fit".  Is there a way to automatically have a browser use this setting using css?

3.  Does Adobe Acrobat use the print media as defined here?
http://www.w3.org/TR/REC-CSS2/media.html

4.  Is there a definitive reference source for the right way to code a web site so it will print in portrait mode on 81/2 x 11 inch paper?  Or even a book or tutorial or reference about how to code a web site that works to print in portrait and look ok on a handheld and print in portrait using Adobe Web Page Capture.

I've sent the last 2 days trying to force a 900 pixel wide site to print WITHOUT flipping to landscape mode.  

I'm trying to do this using @media css - but I can't find a tutorial that really explains how to do this.  

Sorry this is such a screwy question.  Hope someone has some suggestions.

April



0
aprillougheed
Asked:
aprillougheed
  • 6
  • 4
1 Solution
 
oceanbeachCommented:
Hello aprillougheed,

I do not believe you do not need to redesign your site.  I think you are on the right track...you need to set some print styles...

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

embeded CSS...
<style type="text/css" media="print">
table { width: 740px; }
</style>

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

I hope this helps!

oceanbeach
0
 
oceanbeachCommented:
Hi aprillougheed,

I think me comments were a little off...let me try again.

1.  If you take IE6 as an example, with the default margins, the max width you can use before the content gets cut off is roughly 540-550px.  760px is a typical width to use for 800x600 screens, allowing for the room need for default padding, margins & scrollbars.

2.  Many modern browsers now have the 'shrink to fit' option for printing web pages.  Unfortunately, IE6 is still a very popular browser & does not have this feature.  Width:auto may be the closest you can get to 'shrink to fit'.

3.  I am not sure.

4.  As mentioned before, you can use a print only style sheet.  I can provide some additional links if the previous one is not sufficient.

I hope this helps a little more.

-OB
0
 
aprillougheedAuthor Commented:
Dear oceanbeach - thanks for your help.  I'm familiar with Alistapart and I've been considering using div wrapper type tags (3 column liquid layout style) to code the site.  Maybe that's my only solution here - as good old tables look like they just aren't going to cut it in a handheld/IE 6.0 etc. world.  Looks like coding for all devices and platforms is getting complicated again.  I hate to post a url - but please take a look at the page below and you can see why I don't think setting all tables to 740px will work.

http://www.netafim-usa-agriculture.com/Agriculture/p-filters/p-2-disc-kleen-filter-EE.php

I think I'd have to id to types of tables - one for the overall width and one for the rest of the pages.  Which means it's probably easier to just move to <div> liquid style of design.

What do you think?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
aprillougheedAuthor Commented:
I just found a complete walkthrough of Adobe/Dreamweaver's method of making sites cross-platform friendly.  It is not simple - but shows that even the software developers are jumping through the same hoops.

http://www.adobe.com/devnet/dreamweaver/articles/designing_css.html

Also this page ...

http://www.adobe.com/devnet/dreamweaver/css.html

Let me know if you have any comments and then I'll award you the points.
0
 
oceanbeachCommented:
Hello aprillougheed,

Try using this print style sheet...

body, div, table, td {
      width: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;}
div.boxlinks { display: none !important; } /*remove left sidebar */

I think this may do the trick for you.  It seems to fit one page wide in IE6 (without the 'shrink to fit' feature) at the default margins (which I believe is 1.25" for left & right).

I have not had a chance to check out the links yet, but I will.

Let me know how the above styles work for you.

-OB
0
 
oceanbeachCommented:
Hi aprillougheed,

http://www.adobe.com/devnet/dreamweaver/articles/designing_css.html seems like a pretty good place to start.  And, http://www.adobe.com/devnet/dreamweaver/css.html has a whole bunch of resources, although I did not see anything specific to your scenario (besides, possibly switching to a div based layout).

It is definitely a challenge to try to prepare for all possible types of visitors, from web browser differences to screen size differences.

Let me know if you need some additional resources or if you would like fine tune a print style sheet for your site.

I hope this helps!

oceanbeach
0
 
aprillougheedAuthor Commented:
Hi oceanbeach - I accept the solution - but still will need to get back to you as to whether it worked.

Sure appreciate your help.  At least I now know I'm not missing anything major and that everyone is struggling with the same issues.

I was just looking at recent browser statistics and it's getting really messy between IE6, IE7 and Firefox.

Thanks again for your help.  April
0
 
oceanbeachCommented:
Hi aprillougheed,

Glad to help out!  I will check back to see how things go.

-OB
0
 
aprillougheedAuthor Commented:
Hi oceanbeach.  You are brillant.  I tested code you provided (see below) and indeed it prints without flipping into landscape.  I really want to thank you again as I know it took some time and grey matter to figure out.

I may need your help again as I move through re-coding the site to be device independent - so I hope I'll catch you and can send more points your way.  You deserve it.

I went to the bookstore and got three books to help me along - they are:
Designing with Web Standards (2nd Edition) - Jeffrey Zeldman;
CSS Mastery: Advanced Web Standards Solutions - Andy Budd
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) - Elizabeth Castro;

Have a great evening.  April

body, div, table, td {
      width: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;}
div.boxlinks { display: none !important; } /*remove left sidebar */



0
 
oceanbeachCommented:
HI aprillougheed,

That is excellent to hear all is working.  And, thanks for the nice words.  Just glad I could help out!

Have a great day as well!

-OB
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now