1329527 - [Layout] A4 portrait width in print preview is too low

Status: UNCONFIRMED

(Core :: Print Preview, defect)

Description

[laszlo]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160604131506

Steps to reproduce:

1. Set all printing margins to 20mm, either through "Print this page" + Page Setup or using @page + margin in CSS.
2. Set the html width to 170mm or 100%.
3. For all elements set all margins and paddings to 0.
4. Add and svg image to the page, either with img or inline, with the width 170mm, or any other content (text even) that uses up at least one row.


Actual results:

Watch the content get cut off early on the right hand side in Print preview. The text is only cut off when html has 170mm width because, apparently, Firefox is under the impression that 170mm shouldn't fit on the page.

170mm + 20mm * 2 = 210mm (width of portrait A4)

Through trial and error, I've noticed that the print preview page is approx. 11.5mm too narrow. Since I don't have a printer, I don't know how this actually prints.

This might be an error for the height as well.. and landscape orientation. (I haven't checked.)


Expected results:

The html element with a width of 170mm and page margins of 20mm should fit on an A4.

Comment 1

[laszlo]

I just noticed that this error doesn't exist (on another computer) in version 47.0.1. Another difference (except the hardware and Windows 7 type) is the printer installed. However, on this machine (50.1.0), the print preview works properly in IE9-11 and Chrome with the same printer (Lexmark T640 (MS) default Windows driver).

Of course, I got Firefox to crash while messing around with the printer settings the other day, but I can't reproduce it.

Is the page size in print preview affected by the printer driver?

Comment 2

[laszlo]

I tested this at work today, with yet another version of Windows 7, other hardware and drivers and it fails in 50.1.0.

Comment 3

[Loic]

Could you provide a testing page to reproduce the issue in Print Preview, please.

Comment 4

[laszlo]

http://1329527.foshin.com/index.htm

Comment 5

[Loic]

Thank you.

In addition, do I need to modify some values for the margins in the Print Setup with your testcase?
Or is the issue just reproducible when print previewing directly the testcase?

Comment 6

[laszlo]

You don't need to modify anything.. in fact, Firefox should (and always does for me) ignore those settings since they are in the stylesheet. Unfortunately, there are lots of other issues with printing in all browsers, so eventually I'll go for generating PDFs.

Try changing the margins – shouldn't make a difference.

The test case shows (for me) that more than the arrow doesn't fit on the page. Even if you change the html width to 100%, the image still overflows.. and I chose to use an image for simple illustration because text usually wraps.

Comment 7

[Loic]

I tried with FF50 and 53, A4/portrait/"shrink to page", no issue, the right part with the arrow is visible in Print PreviewS. Screenshot: http://i.imgur.com/EfJfsxx.jpg

Have you selected a zoom level in Print Preview? Is it "shrink topage" too?

Comment 8

[laszlo]

Of course without shrinking.. that way anything fits. The report is about Firefox treating a portrait A4 as too narrow (width less than 210mm, because margins 20mm each + 170mm content = 210mm).

Comment 9

[laszlo]

Today, I actually printed a page and it turns out that it's the page margins (at least left+right) that are fixed at 26mm no matter what the CSS or settings are at. That's why the content wouldn't fit.

The report is still valid, though, since this works properly in other versions of Firefox as well as other browsers.

Comment 10

[Loic]

So could you provide a print setup to reproduce the issue?
Which number for margins?

Comment 11

[laszlo]

@page {
	size: a4 portrait;
	margin: 20mm;
}

html {
	width: 100%;
/*
	width: 170mm;
*/
	margin: 0;
	padding: 0;
}

.. and whatever margins in Page Setup, since they are ignored (changed them back and forth and it made no difference in the preview). I printed all margins set to 0 (Page Setup).. and with those 20mm in CSS, it actually came out 26mm.

Comment 12

[Loic]

I can't reproduce it in FF51, with scaling at 100% in Print Preview, the right arrow is visible.

Could you test with a fresh profile onthe machine with the issue, please.
https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles

Comment 13

[laszlo]

I just installed 51, tried it on a new profile and the arrow is gone (doesn't fit). A new profile has "shrink to fit" by default..

Comment 14

[laszlo]

At home:
Windows 7 Home Basic (6.1.7601), FF 51.0.1 (32-bit), as few Windows updates as possible.. I think that FF got "updated" automatically since I'm sure I installed 64-bit manually.

At work:
Windows 7 Ultimate, FF 50.0.1, all Windows updates.

Comment 15

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to laszlo from comment #11)
> @page {
> 	size: a4 portrait;

Firefox doesn't support 'size' in @page rules.

(It's only recently that the specification at https://drafts.csswg.org/css-page/#page-size has bothered to say what it should actually *do*, and even then, I'm not sure about how useful its advice about consulting the user is.)

Comment 16

[Jonathan Watt [:jwatt]]

Attachment: Reporter's testcase

Comment 17

[bugzilla]

Still broken in 80.0.1, and not limited to A4 (preview does not appear to "know" about the actual paper size, using "Microsoft Print to PDF" with "Letter" format also results in broken output).

Does not work with 100% Viewport-percentage lengths (https://developer.mozilla.org/en-US/docs/Web/CSS/length) either, nor with 5 mm margins on A4 at 100% without "shrink to fit".

Test case:

<!doctype html>
<html lang="en">
    <head>
        <meta charset=UTF-8>
        <title>test</title>
        <style>
            html, body, #test{ 
                margin:0; 
                padding:0;
            }
            body{
                height: 100vh;
                width: 100vw;

                /*297-2*5*/
                /* height: 287mm;   */
                /*210-2*5*/
                /* width: 200mm; */
            }
            * {box-sizing: border-box;
            }
            #test{
                height: 100%;
                width: 100%;
                border: 1px solid red;
                background: gray;
            }
        </style>
    </head>
    <body>
        <div id="test"></div>
    </body>
</html>

Same effect with #test set to 100v* and body untouched.

Comment 18

[bugzilla]

(In reply to bugzilla from comment #17)
also concerns "Printing:output". There are a lot of reports already, e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1627503 and https://bugzilla.mozilla.org/show_bug.cgi?id=1625321 so this is likely a duplicate.

Comment 19

[Emilio Cobos Álvarez (:emilio)]

(In reply to bugzilla from comment #18)
Viewport units should be fixed in 81 fwiw, that's bug 1414600.

Comment 20

[bugzilla]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #19)

(In reply to bugzilla from comment #18)
Viewport units should be fixed in 81 fwiw, that's bug 1414600.

Thanks for letting me know. Indeed it looks much better in 81.0b8 (Windows 10, Upgrade requires manual reset of printer.print_* settings in about:config).
Except:

• screen: no red line at the bottom
• print: headers/footers cannot be disabled via dialog (manually via keys print.print_footerleft/right and print.print_headerleft/right)
• print: shrink-to-fit (default) not synchronized between page setup and print preview
• print: Windows OS "Print" dialog shows up on secondary screen above Firefox on primary screen
• print, Page Setup: setting margins (to "5") breaks preview and output

:-)

Comment 21

[Emilio Cobos Álvarez (:emilio)]

(In reply to bugzilla from comment #20)

(In reply to Emilio Cobos Álvarez (:emilio) from comment #19)

(In reply to bugzilla from comment #18)
Viewport units should be fixed in 81 fwiw, that's bug 1414600.

Thanks for letting me know. Indeed it looks much better in 81.0b8 (Windows 10, Upgrade requires manual reset of printer.print_* settings in about:config).
Except:

• screen: no red line at the bottom

Can't repro that (on nightly at least).

• print: headers/footers cannot be disabled via dialog (manually via keys print.print_footerleft/right and print.print_headerleft/right)
• print: shrink-to-fit (default) not synchronized between page setup and print preview
• print: Windows OS "Print" dialog shows up on secondary screen above Firefox on primary screen
• print, Page Setup: setting margins (to "5") breaks preview and output

Which OS is that on? Windows? I thing most of that stuff should be fixed with print.tab_modal.enabled, but not 100% sure.

Anyhow those issues should be each on its own bug, probably.

Comment 22

[bugzilla]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #21)

Yes, FF beta 64 bit on Windows 10.
I'll try a nightly build soon.
If I still encounter the aforementioned issues, I'll address them individually.