跨浏览器CSS用于打印

Question

I thought this would be easier.

A web app I am implementing must print some pages on a4 paper. These pages are prepared just for being printed (they are not the same displayed in the 'app'), so I do not need to include in the same CSS different formats for various media types (they are different from the other pages, monochromatic, etc.): I just need to write one CSS style for the prints.

The basic CSS I am using is Bootstrap V3, from which I removed all the rules for the media type 'print'. I use a second CSS for overwriting some Bootstrap rules and no other files.

The problem is this one:

• on the screen I see exactly the same page in Chrome and Safari;
• the printed results are completely different, especially for what concerns font size: Safari uses much smaller fonts.

Could you please suggest me a way to have the two browsers print the file in the same way?

Answer 1

Most debuggers allow you to debug in a specific media type. So for printing you can set the debugger to use CSS media = print to easily manipulate the styles as desired

I've had similar issues in the past with some dt tables and I resolved it by adding an extra layer of css resets to my print stylesheet.

Anyway it sounds like you just need to explicitly define the font and font-size in your print css.

@media print {
    html, body {
       font: Arial;
       font-size: 12px;
    }
}

Its hard for me to suggest anything else without your tangibles but this is where I would start.

Answer 2

If you use Chrome and Safari for testing, you must check if you are using same printing engine for preview, because Chrome have built-in print enginge and to avoid that use CTRL+SHIFT+P shortcut. I had a lot of errors with Chrome built-in print engine.

Answer 3

Using a font-size in points for print will likely yield a more uniform result. Pixels are for screens. Points are a print unit of measure...font-size: 12pt;