Tom's Guide | Tom's Hardware | Tom's Games
![]() |
![]() |
![]() |
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!

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

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

![]() |
![]() |
![]() |

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