HTML print with absolute postitions

Question

Is it possible to print a HTML page with truly absolute positioned elements to paper? It seems all browsers are doing a big mess here. It is easy to define a body by absolute units (eg. cm) and place elements by position: absolute inside. However, every browser seem to try to make it impossible to print such a page. FF for example is adding print margins, even when printing to a PDF on linux despite 0-margin page settings. Chrome seems to shrink the page in every case. So how to print something with absolute positioning, eg. paper form fields, markings etc.? Have I overlooked something?

Superscribe

The margins may have more to do with your print-settings than your css. They can (and often do) differ between browsers... – Halliday

@antisanity: and the printable area is going to change as well depending on what PPD or PCL driver is used. – Permeable

I agree, but that shouldn't render the meaning of 'mm' useless by scaling everything to fit. So if the printer has defined margins, the browser may state the page doesn't fit the print area but give the user a chance to decide to print it anyway. Especially if it DOES fit, becuase the HTML included margins are just plain white. – Superscribe

You could use media queries to adjust the layout of the page to compensate for the differences. I don't know if it will work, but it is just a thought! :) – Brandt

See this question for extended discussion of handling variable print margins that might be useful. – Impenitent

@Impenitent That would be useful if it were about browsers and Javascript. It's about Windows Forms applications written in C#. The set of software introducing madness and making you crazy differs greatly between the two, and the set of indicators available to you differs even more. – Pyrazole

Answer 1

Sadly, the CSS3 Module: Paged Media allows all this to happen. This are the rules concerning pages which are too big:

3.3.3. Rendering page boxes that do not fit a page sheet

If a page box does not match the target page sheet dimensions, the user agent MAY choose (in order of preference) to:

• Render the page box at the indicated size on a larger page sheet.
• Rotate the page box 90° if this will make the page box fit the page sheet.
• Scale the page box to fit the page sheet. (There is no requirement to maintain the aspect ratio of the page or of any elements on the page when scaling; however, preservation of the aspect ratio is preferred.) [done by Chrome]
• Reformat the page contents, including 'spilling' onto other page sheets. [done by many other or older browsers]
• Clip overflowed content (least preferred).

The user agent should consult the user before performing these operations.

3.3.4. Positioning the page box on the sheet

When the page box is smaller than the page size, the user agent should center the page box on the sheet since this will align double-sided pages and avoid accidental loss of information that is printed near the edge of the sheet.

And this is the rule which breaks all your positioned stuff:

3.7. Content outside the page box

[...] Also, when boxes are positioned absolutely, they MAY end up in "inconvenient" locations. For example, images MAY be placed on the edge of the page box. Similarly when boxes use fixed or relative positioning, they MAY also end up outside of the page box.

A specification for the exact formatting of such elements lies outside the scope of this document. However, we recommend that authors and user agents observe the following general principles concerning content outside the page box:

• User agents SHOULD avoid generating a large number of empty page boxes to honor the positioning of elements (e.g., you don't want to print 100 blank pages). Note, however, that generating a small number of empty page boxes MAY be necessary to honor the 'left' and 'right' values for 'page-break-before' and 'page-break-after'.
• Authors SHOULD not position elements in inconvenient locations just to avoid rendering them. Instead:
  • To suppress box generation entirely, set the 'display' property to 'none'.
  • To make a box invisible, set the 'visibility' property.
• User agents MAY handle boxes positioned outside the page box in several ways, including discarding them or creating page boxes for them at the end of the document.

Have a look at the second paragraph of section 3.7: A specification for the exact formatting of such elements lies outside the scope of this document. Since there is no other document and no other guideline then the general principle following this paragraph, every browser can do whatever it want.

It's one of the flaws that are currently in this CSS3 module. However, I think those flaws cannot be removed by a CSS4 or revised CSS3 module, as the variety of possible stylesheets and resulting layouts is too huge too cover. Also note a little footnote given in CSS Print Profile:

‡ The printer MAY ignore positioned elements that are placed on the page before the position of the current element in the normal flow.

So it's basically not possible to create the same effect in every browser. As for the time being, the only possible way to achieve a portable document is to create a PDF with a third-party application or via a PDF printer and your most favorite browser. Every other way is bound to fail as long as either the W3C's recommendations aren't strict or the browser vendors implement whatever they want.

See also:

• CSS3 Module: Paged Media (Working draft, last revision 2006)
• CSS Print Profile (Working draft, last revision 2006)

Additional notes

If you have a bunch of position:absolute elements which need to be printed it's sometimes a good question whether an element actually needs to be positioned absolute, or if the same effect can be achieved in a slightly different or easier way. Also note that you should use display:none on each element that isn't truly needed for the printed media, such as ads, navigations, etc...

Valois

Is there any overview how the different browsers honor this definitions? There are large differences between them... – Superscribe

@dronus: Unfortunately I haven't found any resources covering this subject. I guess a two year old statement still stands: "Identical results are impossible" :(. – Valois

@dronus: Also, I believe that graphical websites shouldn't be printed. If you want to create a nice layout and use it on a screen, it's fine. But you should only have the real content (no navigation, no advertisement, shrinked footer, shrinked header, no "see also" blocks, printer-friendly images) in a print. If you need this print to be the same everywhere, provide exactly this print as PDF. – Valois

Well why shouldn't a website be printed? It may be made to be printed without navigation and so on. It's poor that a web application still should rely on third party tools and formats as PDF just to bring something to paper, which oviously would be no problem if only those incoherency mess weren't there. – Superscribe

@dronus: Feel free to contribute to the CSS working groups if you have good idea to solve this problem. However, even the presented font depends on the browser/operation system. To make it clear: you can style a page in a way that it can be printed, but the same rules CSS apply: you don't know what the browser will actually support. That's a shame, and the CSSPP/PM are the most ambiguous CSS documents ever in my point of view. After all the W3C doesn't seem to care about printing that much. – Valois

Answer 2

As you say, web browsers tend to do crazy things when printing. Print-oriented engines are often better.

WeasyPrint is an open-source engine that renders to PDF and supports absolute positioning as well as CSS 3 Paged Media to set the page margins:

@page { margin: 1cm /* or 0, if you want */ }

Basic

I still couldn't make it work in the chrome though :( – Stilbestrol

Wow this software is so awesome. I had a home project for a board game box and I needed nice looking labels, but like, 300 of them and all unique. Thank god I found your comment cause I was gonna start making them by hand in Photoshop lol. – Balladry

Answer 3

Make your container to have relative position. That's the only way to keep absolute positioned elements in the same place at every screen and paper. so if your main div (the div where all of your content is located) add following to your css:

#maindivname{position:relative;}

Should do the trick.

Dictum

I'm not sure that this would solve the issues with printer margins and whatnot. – Prompter

Answer 4

I have tested browser status for printing "position:absolute" elements with the following results:

• IE 11: Fail. Doesn't matter what OS, 7,8,8.1.
• IE 10: Pass. However, you cannot revert to 10 on 8.1 so folks with that are stuck.
• Firefox up to 38.05 = Fail. Unknown if any version ever worked.

The good news is that it looks like the Blink/WebKit people did their homework instead of using poor code.

• Chrome: Pass
• Opera: Pass

Amaleta

Answer 5

Media Queries will do the trick -- check this link and previous question out, maybe it will help. Suggestions for debugging print stylesheets?

Media Query transitioning px into inches/cm/whatever needed for printing requirements.

That border/margin you mentioned is probably your printer's printable area (the grip edge). Most printers need some type of edge to grab and feed the stock. That's why when one prints a full-bleed document (ink to the very edge), it's printed on stock larger than needed, then trimmed down.

Grantland

Answer 6

set the margin with page setup is the first and primary solutions for printing the HTML page or a DIV .

After all not expected result will come then you need some digs on your HTML page.

Make a window without title bar or any custom bar using java script.And put all Original data into that window with a position:relative and also set the media type as print.

position:relative;
media:print;

Hope it will helpful.

Steddman

Answer 7

Use in CSS this property:

body{
  -webkit-print-color-adjust:exact;
}

This help positions absolutes and backgrounds in tables.

Bille

Answer 8

Late to the party, but I was trying to electron printToPDF a landscape-letter-sized document with absolute-positioned and absolute-sized divs, chrome's print engine annoyingly scaled my page down NO MATTER WHAT I tried to do as long as I had content more than 10ish inches in width, until I added THIS to the css styles of the divs:

overflow:hidden;

That was all it took for it to behave as expected.

Hex