The #media at-rule can specify a media query, such as print, to apply css rules to the document.
Let's say I have the following code:
#media print {
#page {
size: 3in;
margin: 0.2in;
}
}
body {
border: 1px solid;
}
<body>
<h1>Title for the page</h1>
<p>Some text goes into here.</p>
</body>
When I open this html webpage in Chrome, with its "Print to pdf" tool, I get a satisfactory result - the user can't change the exported pdf size, it is determined by the css rule, 3inch×3inch in this case. However, you can change the margins in this GUI, although I explicitly set it in the second rule.
EDIT:
When choosing "Default" margins in the printing tool, the margins indeed follow the rule set up in the css file.
On the other hand, on Firefox, the user can simply change the pdf page size, change the orientation and how to scale the content into the page. If so, then what effect does the css rule have?
So my question is mainly towards Firefox behavior: Is that a bug or rather is it ok?
Any thoughts would be very helpful.
According to MDN, #page/size CSS rule is simply not supported in Gecko and WebKit based browsers (Firefox and Safari) as of 2021-10.
https://developer.mozilla.org/en-US/docs/Web/CSS/#page/size#browser_compatibility
Bugzilla entry: [css3-page] implement #page rule size attribute
Related
I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.
To illustrate my purpose, I simplified my code to a html page with a single red bordered table that should be 210mmx297mm (A4 paper size):
<!DOCTYPE html>
<html>
<head>
<style>
#page
{
size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
}
html, body
{
width: 210mm;
padding:0;
margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */
}
html
{
background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
}
table
{
width:100%;
height:297mm;
-moz-box-sizing: border-box;
border: solid 3px red;
border-spacing:0;
border-collapse: collapse;
}
td
{
padding: 0;
text-align: center;
box-shadow: inset 0 0 0 1000px white;
}
</style>
</head>
<body>
<table><tr><td>Hello world!</td></tr></table>
</body>
</html>
When I try to print this with Firefox (49.0.2), and carefully setting all margins to 0 and rendering size to 100%, I get a table which obviously is oversized:
If I select 'Adapt to page' for rendering size, I get a table which obviously is downsized:
I'm not much more lucky if I try with Chrome (54.0.2840.87 m)
I tried to force size to 210mmx297mm all the way round in the css, but there's still something wrong. I can't figure out what it is ... either a bug in rendering engine or setting missing in my code.
Note
Contextually I'm trying to create automatic reports all in html+css+javascript so they can be easily be viewed and eventually printed to pdf or paper from a web-browser. Cover page should be filled with some image up the very edges of A4 paper.
Here is some more complete example:
Example (JSFiddle)
I'm almost there, everything display nicely on screen (firefox+chrome) but there's still those margins when printing (printing works with firefox+nomargin+adaptsize only ... chrome is bugged for repeating table header/footer when printing).
You are tackling a difficult problem which is a bane of many programmers' existence. Printing from HTML and ensuring compatibility with different browsers is basically a unicorn. You shouldn't manage that concern yourself. The quirks of CSS styling and the fragmentation of the browser ecosystem will make sure you don't succeed.
My advice is that you take a look at a PDF generator API like PDF Kit or iText.
From my research, page and form printing is especially problematic on Firefox. As you've noticed from first hand experience, you can't manage margins in a sane way. I also tried with Firefox 49.0.2 without success.
I thought about using #media print{} but Firefox was unwilling to collaborate.
That being said, your code worked just fine for me running Chrome on the version you mentioned. Note that I set the margins to 'none'.
Cover page should be filled with some image up the very edges of A4 paper.
You're never going to satisfy this requirement. Trust me, I've been doing dashboards and reports on the web for a long time and you simply don't get fine-grained control over rendering like this. The web isn't designed for it.
You can still generate some great reports if you're willing to work within a margin and not try for pixel-perfect layouts. Web reports can look super sharp and you can cover multiple media with one code base.
But for situations where pixel-perfect rendering matters, in addition to control over page breaks and such, only a PDF library will suffice. There are some good ones out there--I've had success with PDFSharp.
Why don't you display a cover image that doesn't span the entire page?
You could use phantomjs to render your pdf (you ask for pdf eventually). In php I have successfully used https://github.com/kriansa/h2p to generate pdf's. (also with rendering javascript based charts with d3.js). It is not easy but with headless browsing you can make it work.
I am developing a web page that has light colored text on a dark background. When I try to print the page in black and white, the browser seems to automatically be inverting the colors so that it doesn't take a full cartridge to print. This is exactly what I was hoping for.
When I try to print in Firefox, the text is converted to a fully solid black. In Chrome, however, the text appears faint, and that is making it hard to read. Chrome still prints page numbers, time stamps, etc in the full solid black. How can I get Chrome to print the text on my page in that same full solid black?
Here's a sample showing the exact colors I'm using, and it reproduces the behavior I'm seeing on my actual page.
<body>
<form id="form1">
<div>
<table style="background-color:#2D3541; width:900px; height:900px">
<tr>
<td style="font-size:medium; text-align:center; color:#B7DBFF">Sample Text</td>
</tr>
</table>
</div>
</form>
</body>
What you can do is create what's known as a Print Stylesheet. This is a normal css stylesheet loaded in only when the user tries to print the web page in question. Normally browsers will aim to ignore certain CSS attributes which could lead to large amounts of ink being wasted (say the page has a background colour) and convert text to darker colours by assuming the background is white.
This can be overridden by creating a new print stylesheet <link rel="print" href="/css/print.css" or using media query #media print {...}
I find using a separate print stylesheet preferential as browsers won't load it until the user is intending to print the page.
by specifying the color of the the text that's causing issue in your print stylesheet or media query, you should be able to resolve issues where browsers aren't picking up your text style rules. If you're overriding a value set in another stylesheet, experiment with the use of !important if using a print stylesheet alone doesn't help things.
Ideally you should give your td a class to give you more granular control. Values in the style attribute take a higher priority than stylesheets, and Chrome may still be honouring the inline style attribute when the page is printed.
#media print {
.light {
color: #000 !important;
}
}
Smashing Magazine has some great resources on print styles:
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
Im trying to learn how to enable print background-colors pages in chrome :
Take for example http://angularjs.org/
the main page is :
So If I click print ( ctrl+P) and mark the "background colors and images" - it does show the background colors which are future to be print :
All ok.
But If I navigate to another page http://docs.angularjs.org/tutorial/step_02 which also have background colors in it :
And when I try to print it - I see it in the preview pane without colors :
My question is : how did they do that ? ( or better , how can I make it print background colors ?)
I already read here that I should use -webkit-print-color-adjust:exact;
so I added it to the html via chrome developer toolbar , but it didn't help. ( when I clicked ctrl+p again
What should I change in the css in order for it to print also background colors ?
related info , searching for #media , found it under :
But I didn't find any related info there.
Ok, I think you didn't got what I meant in the comments, anyways, so it's pretty simple, say am having an element, like
<div class="blow"></div>
With a background set to tomato, so inorder to make that work, first of all you have to be sure that you have media print set, like
#media print {
/* Declarations go here */
}
OR
<link rel="stylesheet" href="style.css" media="print" />
Now, what you have to declare is
-webkit-print-color-adjust: exact; in the property block, like
#media print, screen { /* Using for the screen as well */
.blow {
height: 100px;
width: 100px;
background: tomato;
-webkit-print-color-adjust: exact;
}
}
Demo (Only for webkit browsers i.e Chrome/Safari)
In the above demo, you should be able to see the red block, even in the print preview window of your Chrome.
As you have commented, it works for me..
OR
Support for the same is dirty, for more information on the property, you can refer MDN
From MDN :
Body element backgrounds are not printed Currently neither
Chrome nor Safari print backgrounds of the body element. If this
property is set to exact for the body element, it will apply only to
its descendants.
Chrome clipped image bug
When background images are clipped (for example, when using
background-image sprites), due to Chromium bug 131054, they will
appear distorted when printed from the Chrome browser with
-webkit-print-color-adjust: exact. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the
element to which they are applied) are printed correctly.
External links
WebKit bug 64583: "WIP: Add CSS property to control printing of backgrounds for individual elements"
CSSWG wiki: "print-background" - a proposal to standardize this
property
Your background-color is probably overwritten. To achieve background-color for printing increase the specificity of your selector or add !important to the statement. Along with -webkit-print-color-adjust: exact; this should work for you:
#media print {
.mycontainer {
background-color: #000 !important;
-webkit-print-color-adjust: exact;
}
}
I've got html+css code running and looking good on explorer 10.
When i open the page in chrome the only differnce is the resolution.
Things (like headlines for examp.) that take 100% of the screen in explorer takes something like 75%-80% in chrome.
That causes white spaces to apper on the remaining 20%-25%.
is there any solution that doesn't require massive modifications in the code?
thanks.
*any code will demonsrate the issue, for examp:
<!DOCTYPE html>
<html>
<body>
<div >
This takes all the screen in explorer 10 but not in chrome.................................................................................................................................................................................................................................................................................
</div>
</body>
</html>
Use a "reset" CSS file. Here are some of the more popular ones: http://www.cssreset.com/
The problem here is that the "user agent stylesheet" is different between browsers, so a reset stylesheet will impose specific styles, thus making all browsers look approximately the same.
That problem is because you are not providing any CSS code to the file!
When there is nothing to process, the browser adds its own style. Which are known as "User-agent stylesheet". Which have their own styling techniques.
To minimize this, you can add just a few of the codes such as:
body {
margin: 0;
padding: 0;
}
This way, you can minimize the browser's override to control and change the auto margin and auto padding techniques!
In Google Chrome, if you just create a simple file like the one you have. And run it after saving it, you will find that browser automatically adds
margin: 8px;
And some of the other styles to the document on its own! That is because of the browser's CSS sheet.
I have a HTML "report" page that contains amongst other things a HTML view that looks like this:
When you print preview this though, it looks a lot less nice :)
I know about CSS for printing, but what I don't understand is how my HTML is being interpreted like that - for example why do my blue borders come up fine, but my colored boxes (which are actually just empty divs inside a td cell) don't show up at all in the print preview. Also, why would the white text on black on the left not print like that?
Are there some rules for print-friendly css? Any suggestions here?
BTW - I tried previewing in both IE 10 and chrome - both pretty much did the same
I guess the problem is related to "background-color" and "background-image" properties that are ignored by default on many browsers (when printing).
For chrome you can add the following code to your print css, in firefox and IE you must select "print background" in the print dialog.
:root {
-webkit-print-color-adjust: exact;
}
EDIT: AN ALTERNATIVE APPROACH
Since you're looking for a way to provide readable information also on the printer you may provide specific content just for that:
in your HTML:
<td class="green_background blue_border">
<img src="img/green_bk.png" class="show_on_print">
</td>
<td class="orange_background blue_border with_star">
<img src="img/orange_with_star_bk.png" class="show_on_print">
<span class="hide_on_print">*</span>
</td>
in your stylesheet:
#media screen,print
{
.blue_border {border: 1px solid #00F;}
}
#media screen
{
.green_background {background-color: #0F0;}
/* hide something when displayed on screen */
.show_on_print {display: none;}
}
#media print
{
img.show_on_print {/* add size, etc. */}
.hide_on_print {display: none;}
}
you have to create also the images. The idea is to replace the background with some small sprites, or an alternative text only on printers. This works in any browser
The reason why you don't see the colored boxes is because the color is applied via background-color. This was one of the main sources of problems with printing HTML in the past, so many browsers ignore background colors and images to make the printout more readable (text is hard to read on a B&W printer when it's on top of a "gray" area).
In your case, this is problematic since there is no text.
Here is a question which explains how to turn background color printing on in Chrome. Other browsers have an option in the printing dialog.
Alternatively, "print" the page into a PDF file and then use a PDF viewer to print it. In this case, the browser might preserve the background settings.
Check if your browser suppresses background colours when printing.