CODEWITHSUNDEEP
javascriptcssxhtmlprintingms-word
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

How to write print css to get print from web pages in almost same manner as we get from MS word?

  1. How to make cross size and cross browser compatible print CSS for World's most use paper sizes to get print?

              A4, A3, Legal etc

  2. How we can same almost similar formatting to our site page's like MS word ? What are best practices to get consistency in formatting of print page from any popular browsers?

  3. How to set cross browser margin and font-size with consistency for all like MS word does?
  4. Is css font-size unit em best for both screen and print? or we should use pt or px in print css? and i saw first time here new css property body {width: 7in}.
  5. Can we set different CSS (with or without help of JavaScript) for color and B&W print (if i want to give different light color to save ink in B&W print?
  6. Should we give fixed width to print css if we are making fluid site for screen to get print on paper (which has fixed width)?

What about this? any suggestion?

body                             {margin: 15px; }
#mainContainer                   {width: 842px; /* equivalent to A4 */ margin: 0; }
#header                          {display: none; }
form                             {display: none!important; }
#footer                          {display: none; }
#mainContent #leftCol            {display: none; }
#mainContent #rightCol           {display: none; }
#mainContent #contentSection     {float: none; padding: 0; margin: 0; font-size: 13px; width: 100%; }

Upvotes: 6

Views: 2085

Answers (1)

Pekka
Pekka

Reputation: 449435

You can specify print-only stylesheets using <link rel="stylsheet" type="text/css" media="print" href="print.css">

  1. The user has to specify the page size in their print dialog. You were able to suggest the page's orientation in CSS2 using @page but it was dropped in 2.1. See here and here for excellent introductions into print stylesheets.

  2. The usual quirks apply, like differences in the box model. The only best practice that comes to mind is keep it simple, don't use position: absolute, and test a lot. Install a PDF printing driver for testing.

  3. You should be able to specify those in your print stylesheet.

  4. Using pt, being a physical unit, should produce consistent results on every machine.

  5. No. You will have to have the user pick the right stylesheet beforehand.

  6. If you don't want your printout to consist of five pages next to each other, probably yes. However, you would only do that in your print stylesheet.

Remember that in the default settings, all browsers will print a proprietary header and footer that only the user can remove in their print dialog.

If you want total control over every inch of your print product - including size and orientation - you will need to start generating PDFs.

Upvotes: 4

Related Questions