4

How can I code a CSS style to force specific page margins for a web page when printing, and be valid for IE and Firefox ?

unwind
  • 391,730
  • 64
  • 469
  • 606
Moutaz
  • 156
  • 1
  • 3
  • 8

2 Answers2

5

Use the media type "print" (@media print).

Don't set a fixed width nor a maxwidth. Make the content fluid instead. If you specify any with (px, em, pt, cm) you will always run into one or the other problem because different browsers add different margins.

A4, letter, A3, it's not your concern. Your document doesn't care. The user can print your document on whatever paper he has available because your content is fluid.

Find some tips about css for print here.

markus
  • 40,136
  • 23
  • 97
  • 142
  • 1
    In many case, we care the page size as page head/footer and related CSS implementation are still WIP for years. There is no standard for a well formatted HTML printed document otherwise server side PDF. – Dennis C Oct 08 '13 at 01:21
  • I agree with Dennis. Sometimes, your client just wants to print an A4 piece of paper. You just set your sizes like in this answer: http://stackoverflow.com/a/16650459/291557. I hope you won't tell your client: "You see, in CSS, the document doesn't care about the size. It just flows, even if lines break and things are split across pages. We design for universal sizes." – duality_ Oct 26 '13 at 14:45
0

One workaround is to use SVG instead. With SVG, you can use something like this:

<svg width="19cm" height="26.5cm" viewBox="0 0 1900 2650" xmlns="http://www.w3.org/2000/svg" version="1.2">

Then you just ensure all of your elements are within your 1900x2650 view.

Unfortunately, this does involve "recreating" your page in SVG, which is quite an inconvenience. It seems to be necessary, though. HTML & CSS solutions cannot guarantee that content won't spill over into multiple pages where you had intended for it to be a single page.

James
  • 773
  • 2
  • 18
  • 29