What parts of print media css does the cups xhtmltopdf filter honor?

Question

I'm trying to use html for printed documents. I have headers that I want to appear on every printed page, and I'm using the following code:

<style type="text/css">
  @media print {
    div.header {
      position: fixed;
      width: 100%;
      top: 0;
    }
    #student_name, #date_submitted {
      background: transparent;
      border: none;
      border-bottom: 1px solid #000000;
      width: 55%;
    }
  }
  div.twocol {
    width: 50%;
    float: left;
  }
  div.problem {
    display: inline-block;
    width: 5.5em;
    font: 300% monospace;
    text-align: right;
    margin: 2.5em 0 2.5em 0;
  }
  div.operand2, div.operation {
    float: right;
    border-bottom: 0.1em black solid;
  }
  }
</style>
</head>
<body>
<div class="header">
  <div class="twocol">
    <label class="student_name" for="student_name">Name</label>
    <input class="student_name" type="text" id="student_name"></input>
  </div>
  <div class="twocol">
    <label class="date_submitted" for="date_submitted">Date</label>
    <input class="date_submitted" type="text" id="date_submitted"></input>
  </div>
</div>
<div class="problem">
  <div class="operand1"></div>
  <div class="operand2"></div>
  <div class="operation">+</div>
</div>

If I preview this from within Chrome's own print dialog, it looks pretty much the way I intend. It also looks correct if printed from Chrome's print dialog (identical to the preview, at least to my eyeball).

If I run this through CUPS' xhtmltopdf filter (to simulate printing), then several flaws appear.

The header looks correct on the first page, but does not appear on any subsequent pages like they would from Chrome's own print dialog. This proves that it's styling some things from the media print selector, otherwise I'd just see plain inputs. Is this even a problem with the media print selector at all, or is something to do with position-fixed?

The second issue is that the other elements (class "problem") are rendering much larger from xhtmltopdf than they do from Chrome's print dialog.

Is this also a css issue, or something peculiar from CUPS? I'm sort of clueless about this, but I seem to remember from years ago that some browsers had default styles for elements at least when in quirks mode. Is there a style that Chrome's applying to this that xhtmltopdf misses? Is something else going on?

Not sure if this will help, but I'm including output from the cups filter:

john$ cupsfilter /mnt/Linkstation/Documents/Education/\!Curricula/Arithmetic/Arithmetic\ -\ g1\ -\ Addition\,\ no\ carrying.html > test2.pdf
DEBUG: argv[0]="cupsfilter"
DEBUG: argv[1]="1"
DEBUG: argv[2]="john"
DEBUG: argv[3]="Arithmetic - g1 - Addition, no carrying.html"
DEBUG: argv[4]="1"
DEBUG: argv[5]=""
DEBUG: argv[6]="/mnt/Linkstation/Documents/Education/!Curricula/Arithmetic/Arithmetic - g1 - Addition, no carrying.html"
DEBUG: envp[0]="<CFProcessPath>"
DEBUG: envp[1]="CONTENT_TYPE=text/html"
DEBUG: envp[2]="CUPS_DATADIR=/usr/share/cups"
DEBUG: envp[3]="CUPS_FONTPATH=/usr/share/cups/fonts"
DEBUG: envp[4]="CUPS_SERVERBIN=/usr/libexec/cups"
DEBUG: envp[5]="CUPS_SERVERROOT=/private/etc/cups"
DEBUG: envp[6]="LANG=en_US.UTF8"
DEBUG: envp[7]="PATH=/usr/libexec/cups/filter:/usr/bin:/usr/sbin:/bin:/usr/bin"
DEBUG: envp[8]="PPD=/System/Library/Frameworks/ApplicationServices.framework/Versions/A/Frameworks/PrintCore.framework/Versions/A/Resources/Generic.ppd"
DEBUG: envp[9]="PRINTER_INFO=cupsfilter"
DEBUG: envp[10]="PRINTER_LOCATION=Unknown"
DEBUG: envp[11]="PRINTER=cupsfilter"
DEBUG: envp[12]="RIP_MAX_CACHE=128m"
DEBUG: envp[13]="USER=john"
DEBUG: envp[14]="CHARSET=utf-8"
DEBUG: envp[15]="FINAL_CONTENT_TYPE=application/pdf"
INFO: xhtmltopdf (PID 29607) started.
DEBUG: Page = 612x792; 17,19 to 595,773
Jul 10 16:42:57  cupsfilter[29607] <Warning>: CGSConnectionByID: 0 is not a valid connection ID.
Jul 10 16:42:57  cupsfilter[29607] <Warning>: Invalid Connection ID 0
DEBUG: Loading "file:///mnt/Linkstation/Documents/Education/!Curricula/Arithmetic/Arithmetic%20-%20g1%20-%20Addition,%20no%20carrying.html"
DEBUG: Waiting for HTML file to load, 10%
Jul 10 16:42:57  cupsfilter[29607] <Warning>: CGSConnectionByID: 0 is not a valid connection ID.
Jul 10 16:42:57  cupsfilter[29607] <Warning>: CGSConnectionByID: 0 is not a valid connection ID.
Jul 10 16:42:57  cupsfilter[29607] <Warning>: CGSConnectionByID: 0 is not a valid connection ID.
DEBUG: Waiting for HTML file to load, 50%
DEBUG: Waiting for HTML file to load, 50%
DEBUG: Page title="Basic Addition, No Carrying"
DEBUG: Bounds of document are [0.0 0.0 579.0 2608.0]
DEBUG: Starting page 1: [0.0 0.0 578.8 681.0]
DEBUG: Starting page 2: [0.0 681.0 578.8 754.8]
DEBUG: Starting page 3: [0.0 1435.8 578.8 685.2]
DEBUG: Starting page 4: [0.0 2121.0 578.8 754.8]
INFO: xhtmltopdf (PID 29607) exited with no errors.

score 0 · Answer 1 · answered Jul 11 '16 at 07:11

I don't know what "CUPS' xhtmltopdf" is (quick search didn't find usefull information) but I'm pretty sure you would be better off using paged media for your PDF creation.

The downside is that modern browsers wont let your preview there css rules, you will need solutions like PrinceXML, PDFReactor or wkhtmltopdf. This way you could use specific css rules to accomplish what you want.

example:

@page {

    @top-left {
        content: Name __________________;
        font-size: 9pt;
        color: #333;
    }

    @top-right {
        content: Date __________________;
        font-size: 9pt;
        color: #333;
    }
}

This doesn't answer my question. CUPS is the printer system on Mac OSX and most linux systems. — John O, Jul 11 '16 at 14:27

What parts of print media css does the cups xhtmltopdf filter honor?

1 Answers1