Is there a way to print a website the same across every browser?

Question

I have a website which only consists of text (font-size and font-family). The font-size is in mm and the fonts used are Times New Roman, Arial and Courier New.

When I print the website in all major browsers, every browser does something else. I turned scaling off.

Am I doing something wrong or is it impossible to have a (very) simple webpage that looks the same on paper across every browser?

Answer 1

At the end of the day no. You can get it close but it won't necessarily be the same.

EDIT:

Since I got a downvote let me explain: There is no guaranteed way to make this work. Every browser and version is going to be somewhat different and there's no way to guarantee the webpage will look or print the same in every browser.

Answer 2

For printing, you can setup a specific stylesheet which the browser will use only when it is printing - here's some good resources:

http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/ - this is particularly good, especially the part about including the full link

a:link:after { content: " (" attr(href) ") "; }

http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

There's some use of media queries there, but the basic way to include a specific stylesheets for printing is something like this:

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

Good practice is to strip out as much as possible around the article and just give the user what they want - simple styles will also be easier to get working across browsers.

Answer 3

Start by adding a "reset css" to set all the browsers to a common starting point. Searching for "reset css" should provide a variety.

Answer 4

Regarding your comment and as a partial answer, always use only free fonts. For example Times New Roman isn't (and as a linux user I don't have it) and should be preferred Liberation Serif (just like Arial should be replaced by Liberation Sans Narrow).

To have more stylistic freedom regarding the fonts, you could use Google Fonts .

Note also that both in browser display and in print, you can't really have exactly identical inputs in your form.

When I want to have a printing version exactly accorded to your need (including regarding pagination), I add a link building a PDF version of my page.

Answer 5

When we needed a page that the user will print we had to make a completely separate html file, that used old table based layout, a reset.css , and there were still a few differences (like the margins were smaller in Chrome than on IE). It is ugly (mainly because of the table based layout), but this way the sizes and layouts are at least identical.