Computing.Net > Forums > Web Development > Printing webpage without cropping

Computer Problems? Computing.Net has over 1,000,000 posts about all things technology related! Over 90% answered within 24 hours! Click here to start participating now! Also, be sure to check out the New User Guide.

Printing webpage without cropping

Reply to Message Icon

Name: chwr
Date: January 29, 2005 at 01:37:07 Pacific
OS: Windows XP Professional
CPU/Ram: Intel Pentium 3, 256MB
Comment:

Hi,

I've seen webpages with a print icon that when used, prints the content very well formatted without any cropping at the bottom or right margins. How do they achieve that?

Thanks!




Sponsored Link
Ads by Google

Response Number 1
Name: Khalid
Date: January 29, 2005 at 04:18:48 Pacific
Reply:

A well designed website uses a structure of elements of which the appereance is controlled in css-sheets. You can apply different sheets foor different media. The most common one is used to describe the style and lay-out for elements to display on screen. But css can also be used to control elements on a site when the page is printed, shown on a small screen (mobile phone), and al sorts of other media-types.
I have found this link via google, but perhaps you now already have enough information to find tutorials on the sites you personally like best.

More links:
http://www.pmob.co.uk/faqcss/tutorial03/
http://www.w3schools.com/css/default.asp?output=print
http://www.htmlcenter.com/tutorials/tutorials.cfm?id=56&type=CSS


0

Response Number 2
Name: Michael J (by mjdamato)
Date: January 29, 2005 at 13:55:21 Pacific
Reply:

I agree with Khalid, but here is some more specific information.

As he said, style sheets are the key. I have designed several web applications that required report generation with page pargins, footers, etc.

You have two ways to tackle the issue. One is that you can create a page that is just for printing. This is done on Yahoo maps and most airlines that I have purchased from. They design the page to look good, but there is a link for a print friendly version. The print -friendly version is the same content but without all the graphics and such (it's also good if it is only black and white). This is the easiest method in my opinion because you can design two differnt pages exclusively for their purpose: design or printing.

The second method is a little more tricky. It involves creating a page that uses the style sheet property that is described in the first link Khalid provided: @media. For example if a site has a left navigation bar you don't want this to print. So I would define the style "leftNav" like this:

@media screen {
.leftNav {display: inline;}
}

@media print {
.leftNav {display: none;}
}

Now, any elements that are given the style leftNav will be displayed when displayed on screen, but will be hidden when the page is printed. A lot of thought needs to go into this type of design to make sure that tabels are not broken and other problems do not occure.

Lastly, when creating a printable page I have found that it is very helpful to contain the contents of the page in a table that is "fit" to a page. The size of the table is defined using points and there are 72 points per inch. IE has default margins for printing of .75 inches. So an 8-1/2 x 11 page would have 7 x 9-1/2 printable area with IE's default margins. That would equate to a table that is 504 points wide by 684 points high. If the content being printed fits within those boundries, there will be no cropping (with IE's default margins that is - you can't guarantee it will work for everyone unless you want to dynamically create a PDF!).

Michael J


0

Sponsored Link
Ads by Google
Reply to Message Icon

Related Posts

See More







Post Locked

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.


Go to Web Development Forum Home


Sponsored links

Ads by Google


Results for: Printing webpage without cropping

print webpage forms w/o header/foot www.computing.net/answers/webdevel/print-webpage-forms-wo-headerfoot/327.html

save jpegs from a non right click www.computing.net/answers/webdevel/save-jpegs-from-a-non-right-click-/715.html

Frontpage acting weird www.computing.net/answers/webdevel/frontpage-acting-weird/2405.html