CODEWITHSUNDEEP
cssfirefoxprintingexplorer
ave4496
ave4496

Reputation: 3018

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

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?

Upvotes: 2

Views: 904

Answers (5)

Denys Séguret
Denys Séguret

Reputation: 382160

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.

Upvotes: 0

danp
danp

Reputation: 15241

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.

Upvotes: 1

SztupY
SztupY

Reputation: 10536

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.

Upvotes: -1

Spencer Ruport
Spencer Ruport

Reputation: 35117

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.

Upvotes: 1

podiluska
podiluska

Reputation: 51494

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

Upvotes: 0

Related Questions