CODEWITHSUNDEEP
cssprinting
Moutaz
Moutaz

Reputation: 156

CSS formatting A4 print

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 ?

Upvotes: 4

Views: 17606

Answers (2)

James
James

Reputation: 641

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.

Upvotes: 0

markus
markus

Reputation: 40675

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.

Upvotes: 5

Related Questions