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.
Related
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
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/
I know about #media css tag however it looks like no matter what I set the padding, I se no padding in "print" for my website.
I want to set a padding for print so that I want the website to be printed out with a custom page spacing around the text rather then letting the printer/browser "fit" the content with almost no white area around the website.
Any solution(s) is appreciated.
Did you take a look at the #page rule ? https://developer.mozilla.org/en/docs/Web/CSS/#page
#page {
margin: 2cm;
}
It's from CSS 2 specs, so it's supported by all major browsers (included IE8+).
It might help if you showed some code — it's hard to offer a solution if www can't tell what the problem is. This works fine for me in Safari on a Mac:
<style>
#media print {
body {padding:100px;}
}
</style>
I am new for css, still I'm trying to learn media types, i can't understand the usage of media type print, can anyone please explain what really does media type print
for an example what happen I use this css
#media print
{
p.test {font-weight:bold;}
}
It causes the CSS to only apply when the document is rendered to a printer … for putting on paper.
Suppose I have a webpage having black back color background then during printing It uses lot of ink. So, the thing I have to do is to change the background color to white and font color to black(if using white earlier).
This thing can be done by using
#media print
{
......
......//here write your code which you want during printing
}
this is an example for using #media print(But it have lot of other plus points also).
Yes, you can see the change during print preview
I need to print report page that has couple of background images on it. But only these images are not printable. These images are logos actually for graph and hence very important in report.
I have another option that I can crop them and include in page as tag but this is last option. Hence before that I would like to know if there is any way to forcefully print these images? Can anybody help me out?
By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.
The user will need to change their browser settings.
Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.
HTML
<div class"graph-image graph-7">
<img src="graph-7.jpg" alt="Graph Description" />
</div>
CSS
.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}
#media print{
.graph-image img{display:inline;}
}
Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.
Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.
it is working in google chrome when you add !important attribute to background image make sure you add attribute first and try again, you can do it like tha
.class-name {
background: url('your-image.png') !important;
}
also you can use these useful printing roll and put it at the end of css file
#media print {
* {
-webkit-print-color-adjust: exact !important; /*Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
}