Given the following HTML code, why is it that when this document is printed in different browsers you get completely different results? All I want is to be able to generate a “page” from a javascript web-app that prints to a known scale! Seems pretty simple, but so far has been almost impossible to achieve.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg width="210mm" height="297mm"
xmlns="http://www.w3.org/2000/svg" version="1.2">
<rect x="300" y="300" width="1in" height="1in" fill="red"/>
<text x="100" y="100" font-size="1in">Hello</text>
</svg>
</body>
</html>
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:
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?