How to set Safari print margins via CSS to print borderless
There is 3 things to take in consideration:
The margin of the page's rule, unfortunately
@page {
margin: 0cm !important;
}Has no effect on Safari 6, where it does in Chrome 23. As I know, as long as Safari is not supporting this, there is no solution (it seems to be fixed to around 10mm).
The page setting as seen here you might have to define a custom "Paper Size" in the "Print…" menu panel without any margin (you did it already btw).
Obviously to take care of the other inner content html, body… not to have any margin.
CSS to set A4 paper size
I looked into this a bit more and the actual problem seems to be with assigning initial
to page width
under the print
media rule. It seems like in Chrome width: initial
on the .page
element results in scaling of the page content if no specific length value is defined for width
on any of the parent elements (width: initial
in this case resolves to width: auto
... but actually any value smaller than the size defined under the @page
rule causes the same issue).
So not only the content is now too long for the page (by about 2cm
), but also the page padding will be slightly more than the initial 2cm
and so on (it seems to render the contents under width: auto
to the width of ~196mm
and then scale the whole content up to the width of 210mm
~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm
).
To fix this problem you can simply in the print
media rule assign the A4 paper width and hight to html, body
or directly to .page
and in this case avoid the initial
keyword.
DEMO
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
/* ... the rest of the rules ... */
}
This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).
Printing for Safari with window.print()
I am pretty sure the problem was the @page rule, which is not supported my Safari. See more:
https://developer.mozilla.org/de/docs/Web/CSS/@page
I end up creating the pdf with pdfkit server side.
How can I make room for the 2018/2020+ iPad Pro's iOS home-screen-bar / swipe-up-bar in Safari/WebKit?
In your CSS use safe-area-inset-bottom
to preserve space for the bar.
Eg: margin-bottom: env(safe-area-inset-bottom)
Should I use 'border: none' or 'border: 0'?
Both are valid. It's your choice.
I prefer border:0
because it's shorter; I find that easier to read. You may find none
more legible. We live in a world of very capable CSS post-processors so I'd recommend you use whatever you prefer and then run it through a "compressor". There's no holy war worth fighting here but Webpack→LESS→PostCSS→PurgeCSS is a good 2020 stack.
That all said, if you're hand-writing all your production CSS, I maintain —despite the grumbling in the comments— it does not hurt to be bandwidth conscious. Using border:0
will save an infinitesimal amount of bandwidth on its own, but if you make every byte count, you will make your website faster.
The CSS2 specs are here. These are extended in CSS3 but not in any way relevant to this.
'border'
Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties
You can use any combination of width, style and colour.
Here, 0
sets the width, none
the style. They have the same rendering result: nothing is shown.
Related Topics
:Last-Child Pseudo Class Selector in CSS and Internet Explorer
Using :Last-Child with Class Selector
How to Make Background-Image with Linear-Gradient Work on Ie 11
Queryselector with Nested Nth-Child in Chrome Doesn't Appear to Work
Why Doesn't This CSS :First-Child Selector Work
How to Make Text Run Top-To-Bottom in CSS
Have Text Scale Up in Size to Fit the Container
Min-Width and Max-Width with the Same Value
Apply Only to Ie 11 Within Media Query for Screen Size
How to Compensate for Vertical Scrollbar When It Is Not Yet Present
Background-Position Percentage Not Working
How to Use a Data Attribute to Set a Background-Image in CSS
Styled-Components VS SASS (Scss) or Less
Applying Webkit Transitions to Pseudo Elements
Tinymce Is Removing <Style> Tags
Capsule Shape Using Border-Radius Without a Set Width or Height