3

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>
Siyfion
  • 979
  • 1
  • 12
  • 32
  • Can you comment on how differently they come out? I could imagine a difference of +/- 10 or so pixels. The first reply: http://www.coderanch.com/t/131257/gc/Relation-between-pixel-cm-mm may provide more insight. – Ryan B May 30 '12 at 14:19
  • They print out at either 1" exactly, or about 1.15" or 0.9" depending on the browser. – Siyfion May 31 '12 at 11:47

2 Answers2

2

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?

Community
  • 1
  • 1
Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Fantastic insight there Christoph (and Pier!), I had no idea... I'll give this a go now though, hopefully this will be the answer to my printing-prayers! lol. As I simply want to remove any styles they may or may-not add, is there an easy way to do this? – Siyfion May 30 '12 at 15:58
  • I'm not sure that anything I've seen in the *.css will help with printing out the above consistently; I can see how it could be used with a highly complex web page, allowing you to change fonts / sizes / background colors / etc. However with this particular example I can't see how it can make the SVG stay consistent. – Siyfion May 31 '12 at 11:51
  • 1
    @Siyfion you can define css-styles for your SVG, which are then being applied when printing. Additionally it might help, if you define the viewPox of your svg. – Christoph May 31 '12 at 12:04
  • Thanks again, the lack of a viewBox may well have been adding to the issues we were encountering! – Siyfion Jun 01 '12 at 09:19
1

You may need to create a different style for the printing, depending of your browser. (media="print" in your css declaration)

Take a look here:

http://www.css-help.com/css-mediaprint.htm

http://www.w3.org/TR/CSS2/media.html

Pier-Alexandre Bouchard
  • 5,135
  • 5
  • 37
  • 72