HTML + printer driver sizing

[klabarge]

There may be a bug with HTML sizing/scaling when the paper size set at the driver is not typical (US Letter, A4, etc). This was discovered on a Dymo label printer, but was reproducible with a PDF printer.

• Note: the 2.25 x 4.00in is a label size that was installed with the Dymo driver.

Steps to Reproduce

1. Print HTML (sample HTML table) with size: {width: 2.25, height: 4} and orientation: landscape
2. Observe desired result:
   • Right Click PDF, Document Properties, verify size is 2.25 x 4.00in
   • As more columns are added, the HTML scales to fit the paper size
     
3. Change printer driver preferences to 2.25 x 4.00in
   • Right Click "PDFCreator" in Documents & Settings, Printer Preferences, Advanced, Paper Size
4. Print again. Much of the HTML table is chopped off.
   • Note, as I added more rows, they are scaled to fit the label size. The columns are cut off.
     

Before driver size change (first print)

        Using qz.printer.action.PrintHTML to print
[DEBUG] 2017-05-03 20:15:33,822 @ qz.printer.PrintServiceMatcher:?
        Searching for PrintService matching PDFCreator
[DEBUG] 2017-05-03 20:15:33,822 @ qz.printer.PrintServiceMatcher:?
        Found 11 printers
[DEBUG] 2017-05-03 20:15:33,822 @ qz.printer.PrintServiceMatcher:?
        Found match: PDFCreator
[WARN] 2017-05-03 20:15:33,823 @ qz.printer.PrintOptions:?
        Cannot read  as a double for density, using default
[WARN] 2017-05-03 20:15:33,823 @ qz.printer.PrintOptions:?
        Cannot read  as a valid value for interpolation, using default
[WARN] 2017-05-03 20:15:33,823 @ qz.printer.PrintOptions:?
        Cannot read  as a double for paperThickness, using default
[DEBUG] 2017-05-03 20:15:33,823 @ qz.utils.PrintingUtilities:?
        Found Resolution: 60000x60000 dphi
[TRACE] 2017-05-03 20:15:33,831 @ qz.printer.action.WebApp:?
        Waiting for capture..
[TRACE] 2017-05-03 20:15:33,855 @ qz.printer.action.WebApp:?
        Done: 100.0 > -1.0
[TRACE] 2017-05-03 20:15:33,857 @ qz.printer.action.WebApp:?
        New state: SUCCEEDED > READY
[TRACE] 2017-05-03 20:15:33,858 @ qz.printer.action.WebApp:?
        Done: -1.0 > 0.0
[TRACE] 2017-05-03 20:15:33,858 @ qz.printer.action.WebApp:?
        New state: READY > SCHEDULED
[TRACE] 2017-05-03 20:15:33,859 @ qz.printer.action.WebApp:?
        New state: SCHEDULED > RUNNING
[TRACE] 2017-05-03 20:15:33,861 @ qz.printer.action.WebApp:?
        Done: 0.0 > 50.0
[TRACE] 2017-05-03 20:15:33,864 @ qz.printer.action.WebApp:?
        Done: 50.0 > 100.0
[TRACE] 2017-05-03 20:15:33,864 @ qz.printer.action.WebApp:?
        New state: RUNNING > SUCCEEDED
[TRACE] 2017-05-03 20:15:33,865 @ qz.printer.action.WebApp:?
        Zooming in by x8.333333333333334 for increased quality
[TRACE] 2017-05-03 20:15:33,865 @ qz.printer.action.WebApp:?
        Setting HTML page width to 6800.000000000001
[TRACE] 2017-05-03 20:15:33,976 @ qz.printer.action.WebApp:?
        Setting HTML page height to 2383.3333333333335
[DEBUG] 2017-05-03 20:15:34,089 @ qz.printer.action.WebApp:?
        Attempting image capture
[DEBUG] 2017-05-03 20:15:34,831 @ qz.printer.action.PrintHTML:?
        Parsed 1 html records
[TRACE] 2017-05-03 20:15:34,837 @ qz.printer.action.PrintPixel:?
        DPI: 600.0      CNV: 72.0
[TRACE] 2017-05-03 20:15:34,838 @ qz.printer.action.PrintPixel:?
        Drawable area: 0.0,0.0:2.25,4.0
[TRACE] 2017-05-03 20:15:34,838 @ qz.printer.action.PrintPixel:?
        [(0.0,0.0)->(57.15,101.6)mm, 60000x60000 dphi, color, landscape]
[INFO] 2017-05-03 20:15:34,852 @ qz.printer.action.PrintPixel:?
        Starting printing (1 copies)
[TRACE] 2017-05-03 20:15:34,871 @ qz.printer.action.PrintImage:?
        Requested page 0 for printing
[DEBUG] 2017-05-03 20:15:34,872 @ qz.printer.action.PrintImage:?
        Scaling image up by x1.0
[DEBUG] 2017-05-03 20:15:34,920 @ qz.printer.action.PrintImage:?
        Paper area: 0,0:288,162
[TRACE] 2017-05-03 20:15:34,920 @ qz.printer.action.PrintImage:?
        Image size: 288.0,100.96941176470588
[TRACE] 2017-05-03 20:15:34,921 @ qz.printer.action.PrintImage:?
        {Text-specific antialiasing enable key=Default antialiasing text mode, Alpha blending interpolation method key=Highest quality alpha blending methods, Global antialiasing enable key=Antialiased rendering mode, Color rendering quality key=Highest quality color rendering mode, Global rendering quality key=Highest quality rendering methods, Image interpolation method key=Bicubic image interpolation mode, Fractional metrics enable key=Integer text metrics mode, Stroke normalization control key=Pure stroke conversion for accurate paths, Text-specific LCD contrast key=140}
[DEBUG] 2017-05-03 20:15:34,921 @ qz.printer.action.PrintImage:?
        Memory: 600m/3623m
[TRACE] 2017-05-03 20:15:34,924 @ qz.printer.action.PrintImage:?
        Requested page 0 for printing
[DEBUG] 2017-05-03 20:15:34,924 @ qz.printer.action.PrintImage:?
        Scaling image up by x1.0
[DEBUG] 2017-05-03 20:15:34,974 @ qz.printer.action.PrintImage:?
        Paper area: 0,0:288,162
[TRACE] 2017-05-03 20:15:34,974 @ qz.printer.action.PrintImage:?
        Image size: 288.0,100.96941176470588
[TRACE] 2017-05-03 20:15:34,975 @ qz.printer.action.PrintImage:?
        {Text-specific antialiasing enable key=Default antialiasing text mode, Alpha blending interpolation method key=Highest quality alpha blending methods, Global antialiasing enable key=Antialiased rendering mode, Color rendering quality key=Highest quality color rendering mode, Global rendering quality key=Highest quality rendering methods, Image interpolation method key=Bicubic image interpolation mode, Fractional metrics enable key=Integer text metrics mode, Stroke normalization control key=Pure stroke conversion for accurate paths, Text-specific LCD contrast key=140}
[DEBUG] 2017-05-03 20:15:34,975 @ qz.printer.action.PrintImage:?
        Memory: 661m/3623m
[INFO] 2017-05-03 20:15:35,284 @ qz.utils.PrintingUtilities:?
        Printing complete
[TRACE] 2017-05-03 20:15:35,285 @ qz.utils.PrintingUtilities:?
        Returning processor back to pool

After driver size change (second print)

        Using qz.printer.action.PrintHTML to print
[DEBUG] 2017-05-03 20:03:19,826 @ qz.printer.PrintServiceMatcher:?
        Searching for PrintService matching PDFCreator
[DEBUG] 2017-05-03 20:03:19,826 @ qz.printer.PrintServiceMatcher:?
        Found 11 printers
[DEBUG] 2017-05-03 20:03:19,826 @ qz.printer.PrintServiceMatcher:?
        Found match: PDFCreator
[WARN] 2017-05-03 20:03:19,826 @ qz.printer.PrintOptions:?
        Cannot read  as a double for density, using default
[WARN] 2017-05-03 20:03:19,826 @ qz.printer.PrintOptions:?
        Cannot read  as a valid value for interpolation, using default
[WARN] 2017-05-03 20:03:19,826 @ qz.printer.PrintOptions:?
        Cannot read  as a double for paperThickness, using default
[DEBUG] 2017-05-03 20:03:19,826 @ qz.utils.PrintingUtilities:?
        Found Resolution: 60000x60000 dphi
[TRACE] 2017-05-03 20:03:19,832 @ qz.printer.action.WebApp:?
        Waiting for capture..
[TRACE] 2017-05-03 20:03:19,850 @ qz.printer.action.WebApp:?
        Done: 100.0 > -1.0
[TRACE] 2017-05-03 20:03:19,851 @ qz.printer.action.WebApp:?
        New state: SUCCEEDED > READY
[TRACE] 2017-05-03 20:03:19,851 @ qz.printer.action.WebApp:?
        Done: -1.0 > 0.0
[TRACE] 2017-05-03 20:03:19,851 @ qz.printer.action.WebApp:?
        New state: READY > SCHEDULED
[TRACE] 2017-05-03 20:03:19,851 @ qz.printer.action.WebApp:?
        New state: SCHEDULED > RUNNING
[TRACE] 2017-05-03 20:03:19,855 @ qz.printer.action.WebApp:?
        Done: 0.0 > 50.0
[TRACE] 2017-05-03 20:03:19,858 @ qz.printer.action.WebApp:?
        Done: 50.0 > 100.0
[TRACE] 2017-05-03 20:03:19,858 @ qz.printer.action.WebApp:?
        New state: RUNNING > SUCCEEDED
[TRACE] 2017-05-03 20:03:19,859 @ qz.printer.action.WebApp:?
        Zooming in by x8.333333333333334 for increased quality
[TRACE] 2017-05-03 20:03:19,859 @ qz.printer.action.WebApp:?
        Setting HTML page width to 1800.0000000000002
[TRACE] 2017-05-03 20:03:19,960 @ qz.printer.action.WebApp:?
        Setting HTML page height to 4066.666666666667
[DEBUG] 2017-05-03 20:03:20,073 @ qz.printer.action.WebApp:?
        Attempting image capture
[DEBUG] 2017-05-03 20:03:20,833 @ qz.printer.action.PrintHTML:?
        Parsed 1 html records
[TRACE] 2017-05-03 20:03:20,838 @ qz.printer.action.PrintPixel:?
        DPI: 600.0      CNV: 72.0
[TRACE] 2017-05-03 20:03:20,838 @ qz.printer.action.PrintPixel:?
        Drawable area: 0.0,0.0:2.25,4.0
[TRACE] 2017-05-03 20:03:20,838 @ qz.printer.action.PrintPixel:?
        [(0.0,0.0)->(57.15,101.6)mm, 60000x60000 dphi, color, landscape]
[INFO] 2017-05-03 20:03:20,842 @ qz.printer.action.PrintPixel:?
        Starting printing (1 copies)
[TRACE] 2017-05-03 20:03:20,861 @ qz.printer.action.PrintImage:?
        Requested page 0 for printing
[DEBUG] 2017-05-03 20:03:20,862 @ qz.printer.action.PrintImage:?
        Scaling image up by x1.0
[DEBUG] 2017-05-03 20:03:20,883 @ qz.printer.action.PrintImage:?
        Paper area: 0,0:288,162
[TRACE] 2017-05-03 20:03:20,883 @ qz.printer.action.PrintImage:?
        Image size: 71.69904106220802,162.0
[TRACE] 2017-05-03 20:03:20,884 @ qz.printer.action.PrintImage:?
        {Text-specific antialiasing enable key=Default antialiasing text mode, Alpha blending interpolation method key=Highest quality alpha blending methods, Global antialiasing enable key=Antialiased rendering mode, Color rendering quality key=Highest quality color rendering mode, Global rendering quality key=Highest quality rendering methods, Image interpolation method key=Bicubic image interpolation mode, Fractional metrics enable key=Integer text metrics mode, Stroke normalization control key=Pure stroke conversion for accurate paths, Text-specific LCD contrast key=140}
[DEBUG] 2017-05-03 20:03:20,884 @ qz.printer.action.PrintImage:?
        Memory: 966m/3623m
[TRACE] 2017-05-03 20:03:20,886 @ qz.printer.action.PrintImage:?
        Requested page 0 for printing
[DEBUG] 2017-05-03 20:03:20,886 @ qz.printer.action.PrintImage:?
        Scaling image up by x1.0
[DEBUG] 2017-05-03 20:03:20,908 @ qz.printer.action.PrintImage:?
        Paper area: 0,0:288,162
[TRACE] 2017-05-03 20:03:20,909 @ qz.printer.action.PrintImage:?
        Image size: 71.69904106220802,162.0
[TRACE] 2017-05-03 20:03:20,909 @ qz.printer.action.PrintImage:?
        {Text-specific antialiasing enable key=Default antialiasing text mode, Alpha blending interpolation method key=Highest quality alpha blending methods, Global antialiasing enable key=Antialiased rendering mode, Color rendering quality key=Highest quality color rendering mode, Global rendering quality key=Highest quality rendering methods, Image interpolation method key=Bicubic image interpolation mode, Fractional metrics enable key=Integer text metrics mode, Stroke normalization control key=Pure stroke conversion for accurate paths, Text-specific LCD contrast key=140}
[DEBUG] 2017-05-03 20:03:20,909 @ qz.printer.action.PrintImage:?
        Memory: 994m/3623m
[INFO] 2017-05-03 20:03:21,044 @ qz.utils.PrintingUtilities:?
        Printing complete
[TRACE] 2017-05-03 20:03:21,045 @ qz.utils.PrintingUtilities:?
        Returning processor back to pool

[akberenz]

So this is actually working as it should, just not how you are expecting.

In the first print the html page size is actually set to the printer default (at that point Letter, 8.5x11). This allows the entire table to be captured in the web snapshot, and then it is scaled down to the specified 2.25x4.00 page size.
Per your logs: "Setting HTML page width to 6800" => 8.5[paper width] * 96[web dpi] * 8.33333[zoom level]. The actual web width ends up around 816 pixels and the table expands to fill this space, so it looks like everything fits nicely.

In the second print the html page size is again set to the printer default (but that's now the label size, 2.25x4.00). In this instance the table only partially fits in the available space, and gets cut off because the html table doesn't shrink far enough.
Per your logs here: "Setting HTML page width to 1800" => 2.25[paper width] * 96[web dpi] * 8.33333[zoom level]. The actual web width ends up around 216 pixels, but it looks like the minimum width the table will go is around 654 pixels, so it ends up cut.

The reason why it is not printed right up to the edges of the paper is because of the scaling - html page height is by default dynamic. So the more rows you add the smaller the overall scale will be to fit that height on the page and the further from the edge those cut off columns will be:

[tresf]

So the dimensions are backwards? I'm not sure what the proposal here is...

[tresf]

So the dimensions are backwards? I'm not sure what the proposal here is...

Or is this a job for a CSS rotation hack?

[lite1979]

[akberenz]

So the dimensions are backwards?

Not really, and even if we do that, the default web width used will be 384 pixels, so only about half of the table would show up. (it needs a web width of at least 654 pixels to fit). And once more, any scaling for the vertical dimension would create a large whitespace on the right side of the label.

The way 2.0 is set up to deal with this is to define pageWidth and pageHeight in the data options when passing the html to be printed. Unless the webpage is built for a particular label size, this is the only way to ensure the entire html contents will be captured for print.

[lite1979]

Using the pageWidth and pageHeight definitions, the content still gets cut off.

If I use pageWidth: 4 and pageHeight: 2.25, I only get six of the columns to print. The 'left' edge of the html gets cut off, too.

If I use pageWidth: 6 and pageHeight: 2.25, I get all seven columns, but I still have to add a margin to the 'bottom' of the job to get the 'left (bottom)' edge to print on the label.

[akberenz]

If I use pageWidth: 4 and pageHeight: 2.25, I only get six of the columns to print.

Yes, 4in => 384 pixels for the webpage. Using your table, the minimum width to fit is 454 pixels (~4.75in), leading to the cut off at 4in. And then it expands to fill the 6in (576pixel) width, so that one is a full capture.

Keep in mind pageWidth/pageHeight are not meant to be the printer paper dimension, but the dimensions of the web page capture. It will then get scaled to the printer page dimensions as needed.

---

The 'left' edge of the html gets cut off, too.

The left-edge issue is your printer margins. QZ is trying to print from [0,0] but your label printer cannot reach that far, so it is cut off. So that's actually separate from the capture being cut off here.

[klabarge]

Keep in mind pageWidth/pageHeight are not meant to be the printer paper dimension, but the dimensions of the web page capture. It will then get scaled to the printer page dimensions as needed

@bberenz Ahh, now I understand how this works. I used the pixel dimensions of the HTML table and was able to get it to print properly.

Would it make sense to have pageWidth and pageHeight honor px instead of in, mm, or cm?

It's easy to tell the pixel size of a page with the browser tools. Why have developers then convert the pixel dimensions to, for example, inches?

[akberenz]

Would it make sense to have pageWidth and pageHeight honor px instead of in, mm, or cm?

I don't think it would. CSS allows for physical length units, which I would hope developers use to layout HTML pages for printing, as it provides screen agnostic in/mm/cm dimensions, making this a lot easier to work with.

We also use pageWidth and pageHeight for sizing on PDF pages too (on 2.1). Which admittedly, does work slightly different than it does for HTML.

[tresf]

I'm closing this issue as invalid. The trouble with HTML printing in general is that we're battling a dynamic layout engine that cannot be easily rotated, so the only true way to print HTML content that's not fixed is to use the technique outlined in #193 (comment) which has been added to the wiki documentation.