Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@page margin disables custom user settings in browser #1477

Closed
dieisraels opened this issue Nov 21, 2013 · 7 comments

Comments

Projects
None yet
5 participants
@dieisraels
Copy link

commented Nov 21, 2013

The following css changes the margin at printing:

@page {
    margin: 0.5cm;
}

The problem is, that user customization at the browser print settings (tested on current Chrome and Firefox) are ignored. If the printer needs more than 0.5cm border on the page, the user can't change it and the content is cutted.
In my opinion not optimal as the default.

@alilleybrinker

This comment has been minimized.

Copy link
Contributor

commented Nov 21, 2013

Do you have an example test to verify?

@alrra

This comment has been minimized.

Copy link
Member

commented Dec 11, 2013

Do you have an example test to verify?

ping @dieisraels

@dieisraels

This comment has been minimized.

Copy link
Author

commented Dec 12, 2013

Temporarily reactivated:
http://www.erf.de/online/themen/glaube-im-alltag/blind-klavier-spielen/2803-542-4512

I can't customize the border at print setup on current Firefox.

By the way: Why h5bp uses the default value of 0.5cm? Most printers require a larger margin. Especially below.

@alrra

This comment has been minimized.

Copy link
Member

commented Dec 20, 2013

@dieisraels thanks for the test page. :)

Why h5bp uses the default value of 0.5cm?

As the commit that first introduced it doesn't offer any details, I presume the value is (was) the most common default among browsers.


e.g.:

  • I can't customize the border at print setup on current Firefox.

    • I can reproduce this on Mac OS X 10.9 using both Firefox and Chrome, while for Safari, the default is kinda the same as using margin: 0.5cm.

      Browser without @page{margin: 0.5cm;} without @page{margin: 0.5cm;} + Border: “Double Hairline” with @page{margin: 0.5cm;} + Border: “Double Hairline”
      Chrome
      Firefox
      Safari

      (on Windows, IE doesn't seem to have this problem)

    • I can confirm this issue isn't related to http://www.erf.de/online/themen/glaube-im-alltag/blind-klavier-spielen/2803-542-4512, and in fact it is because of using margin: 0.5cm.


Observations:

  • every browser I've tested for, provided a default non-zero value for the margins (even when *{margin:0;padding:0;} is used).

  • print previews ≠ reality, e.g. in Safari:

    preview on paper

In my opinion not optimal as the default.

I agree, and I personally think we should remove @page { margin: 0.5cm; } and let browser handle this themselves.

See also:

@drublic

This comment has been minimized.

Copy link
Member

commented Dec 23, 2013

+1 on removing it. We should let the browser figure out whatever is best.
I ran into a few issues with @page and margins in different browsers. It's hard to anticipate which printer has which margins. Also if you think about the headlines that each browser prints (URL, date aso) we cannot assure that we don't collide with these if we set something as low as 0.5cm.

@alrra alrra closed this in 57be193 Dec 25, 2013

@drublic

This comment has been minimized.

Copy link
Member

commented Dec 25, 2013

👍

1 similar comment
@sarukuku

This comment has been minimized.

Copy link

commented Dec 25, 2013

+1

kcmckell added a commit to kcmckell/html5-boilerplate that referenced this issue Feb 25, 2014

Remove default margin from print styles
Providing a default value (such as `5cm`) for the print margins is
problematic because:

 1) in some browsers, it prevents users from customizing the browser
    print settings
 2) in some contexts (browser/os/printer), the value may be too:
    * small, and the margins may collide with all the different
      headers/footers (URL, date, etc) that are usually printed
      by default
    * big, and the margins will just waste the space

Most browsers provide a default non-zero value for the print margins,
so it's better to not specify a value at all, and just let them handle
this themselves.

See also:

 * http://www.w3.org/TR/css3-page/#at-page-rule
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@page

Close h5bp#1477.

alrra added a commit that referenced this issue Mar 20, 2014

Remove default margin from print styles
Providing a default value (such as `5cm`) for the print margins is
problematic because:

 1) in some browsers, it prevents users from customizing the browser
    print settings
 2) in some contexts (browser/os/printer), the value may be too:
    * small, and the margins may collide with all the different
      headers/footers (URL, date, etc) that are usually printed
      by default
    * big, and the margins will just waste the space

Most browsers provide a default non-zero value for the print margins,
so it's better to not specify a value at all, and just let them handle
this themselves.

See also:

 * http://www.w3.org/TR/css3-page/#at-page-rule
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@page

Close #1477.

ericorruption added a commit to ericorruption/static-boilerplate that referenced this issue Jun 5, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.