How to Get Cross Browser Compatibility in Print on Page from All Browsers

How to get cross browser compatibility in Print on page from all browsers?

Identical results are impossible. The output depends not only on CSS but also on individual settings for page margins, the printer’s capabilities, available fonts, paper format (A4 vs US Letter) and probably a lot more.

For CSS

• Avoid floats and positioning (relative, absolute and fixed). Especially Mozilla (Firefox) can not handle those properties very well.
• Use page-break-* but don’t rely on it. Some browsers insert page breaks even in images.
• You don’t know the page width and height (could A5). Keep anything as flexible as possible.
• For performance, put your print style into the main stylesheet in a @media print {} rule.
• Use pt not px for borders and margins. A printer doesn’t know what a pixel is and may come to strange results.
• Develop your print layout in Opera, which has the best support for @media print currently, and insert compatibility hacks, when you’re done.
• Internet Explorer may crash on print, if you use its reserved IDs.
• Never rely on print preview. You get very different results on real printouts. Save the rain forest with a print-to-pdf-driver. :)

Predictable and consistent cross-browser printing from HTML

We use wkhtmltopdf and PrinceXML to get consistent styling. Both are command line tools that can take a URL plus a custom CSS file. They generate consistent output, and are browser independent, because they are the rendering engine.

We used to use wkhtmltopdf, but we're starting to move to PrinceXML because it supports margin-boxes and two-column layout. (The main caveat with PrinceXML is the price.)

Perfectly styling PDF doesn't seem any worse or harder than styling for web display. My experience is that it takes an hour or two to get a print page styled correctly. I've never tried to handle Google Charts.

cross-browser print command?

window.print() is a de-facto standard. (it's been supported since the days of IE4/Netscape 4).

While you're at it, be sure to check out how you can customize how your page looks when it's printed using print-specific CSS stylesheets.

Why can't I print a web page accurately?

Different Browser may differ when applying styles for printing.

If you want to have a consistent result across browsers, define your own print-styles.

Like this:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

edit: Some links on how to achieve good printing results:

What are most useful media="print" specfic ,cross browser compatible css properties?
-> Link to A List Apart which normally has very good articles

How to get cross browser compatibility in Print on page from all browsers?

Do modern browsers support onbeforeprint / onafterprint HTML events?

The MDN page on onbeforeprint is marked as updated last Nov 14, 2013, and it says “no” for Chrome, Opera, and Safari, “(Yes)” for IE, and “6.0” for Firefox. This is consistent with the results of checking with the current Chrome (version 34) and the last Windows version (5.1.7) of Safari. No event is triggered on them, and in developer tools, no onbeforeprint listener is shown under “Event Listeners” in developer tools when onbeforeprint attribute is used.

There is a WebKit bug report from 2008 about lack of support to beforeprint and afterprint events, and there’s a suggested patch but also issues with it, and it does not seem to be making progress.

So the answer is “No.”

Cf. onbeforeprint and onafterprint is not working in Chrome and IE?

As regards to the possible followup question “What should I use instead, then?”, it should be posted as a new question, with sufficient details (including code) to describe the original problem – in particular, what would be the part that you cannot do by using a print stylesheet.

Which mode is cross-compatible with JSP

Most likely, this has nothing to do with JSPs. JSPs are just a way to mix Java and HTML code. There must be something in the HTML code that IE8 doesn't like.

Setting the mode to quirks or standards mode might help but there is no mode in which all browsers will behave the same. Still, you can find a complete discussion about browser modes here: http://hsivonen.iki.fi/doctype/

What else can you try?

• Use the developer tools built into IE8 (see this answer: How to debug Javascript with IE 8) to check whether IE8 gives you any error messages in the console.
• Add debug information in your app to see what happens around the code that seems broken
• Ask a question without the words "abnormally behaving". Instead, tell us what you see and what you expect and we might be able to help.

Browser Support for CSS Page Numbers

This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!

Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.

You can set your starting number to whatever, the default is 0.

Example:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

... in theory. In real world only PrinceXML supports this.

---

Related Topics