Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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%; }
like image 541
Jitendra Vyas Avatar asked Jan 01 '10 07:01

Jitendra Vyas


People also ask

How do I print a CSS page style?

Developer Tools. The DevTools ( F12 or Cmd/Ctrl + Shift + I ) can emulate print styles, although page breaks won't be shown. In Chrome, open the Developer Tools and select More Tools, then Rendering from the three-dot icon menu at the top right. Change the Emulate CSS Media to print at the bottom of that panel.

How do you make an HTML page printable?

Create a Separate Version for PrintingCreate a separate HTML page for printing. Duplicate the primary content of the full page, whittling it down to primarily text. Remove unnecessary headers and footers (these are often composed of links which would be meaningless on paper). Remove ads and menus from side columns.

What is a print stylesheet?

A print stylesheet formats a web page so that, when printed, it automatically prints in a user-friendly format. Here's what you need to know. Print stylesheets have been around for a number of years and have been written about extensively.


1 Answers

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.

like image 174
Pekka Avatar answered Oct 22 '22 10:10

Pekka