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*/
}
}
Related
Recently I am visiting a website,
but that website makes not visible a section by blurring it (and wants me to pay to see what there is)
I want that I can read through the blurred part of that website.
I read on the internet that there is some code that can solve this. (maybe with javascript or css)
if someone can help, thanks.
like he said #Dai, is better to pay if you really want that content. this is my suggestion, but I will help you the same
one line answer
just add a * selector with this css code filter: blur(0) !important;
so it will become like this:
* {
filter: blur(0) !important;
}
why does it work?
most of the websites for adding the blurring effect, they use the filter CSS property
if the code I show to you before,
don't work, then try using also backdrop-filter CSS property.
the logic is the same: backdrop-filter: blur(0) !important;
* {
filter: blur(0) !important;
backdrop-filter: blur(0) !important;
}
thank #Dai for the suggestion here!
how to use this code?
open devtools on the page.
CTRL + SHIFT + I
click "+" icon
change the selector to *
add the line of code of before.
how it works?
so we basically reset that blur
to all HTML elements using * selector.
so we don't worry about where there is the
element blurred.
by this, I mean that there are websites that make it difficult to find the element blurred: (for example "news websites", etc...)
by adding multiple filters
or nesting the blurred element
or adding the blur effect inline so normal CSS can't override it.
etc...
use also !important that make the resetting of the filter also in inline style="" attribute
it can't do results all the time
remember: there are also some websites that blur the content, but there isn't any real valuable content behind it (for example "LinkedIn" they do that, etc...)
in this example, you can see there is the same component with the same text, and there isn't any valuable content for you (try maybe in that website it will 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/
I'm making a user stylesheet for the add-on 'stylish.'
It applies a semi-transparent dark box over the entire page for night-browsing.
I'm using:
html:before {
content:url()!important;
position:fixed!important;
width:100%!important;
height:100%!important;
top:0!important;
left:0!important;
background:rgba(2,3,3,.35)!important;
z-index:99999999999999999!important;
pointer-events:none!important;
}
to create the fixed, overlying div.
This works just fine, however, if there are any iframes in the site, it will apply this code into the iframes' HTML as well as you can see here:
because these social networking widgets rely on an IFRAME, its repeating the code into those pages, creating a double-overlaying of the semi transparent dark box i've made.
the desired look would be:
I've tried hack-ish things, like applying a much-higher z-index to iframes and specifying the background-color and background of * of anything in the iframes to 'white' and 'opaque' so that it 'floats' on top of the parent html page, but this doesn't work perfectly. i've also tried something like:
html:not(iframe):before{}
but this also doesn't work. I'm wondering if there is a way to do what I'm trying to do in a way that doesn't rely on 'html:before' to create the same effect, or if there's a way to do that but not have it repeat inside the html of iframes on a page.
I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.
Unfortunately, there is no way using CSS to target only the contents of an iframe from within the source of the iframe, i.e. the page that contains the iframe element.
I'm assuming, since you're using Stylish, that your CSS is in a Firefox user stylesheet. If so, you may have to look at the source URLs of those iframes, create a #-moz-document rule targeting those URLs at their domains, and remove the html:before pseudo-element accordingly.
Something like this, which should go beneath what you already have:
#-moz-document domain(/* Facebook Like */),
domain(/* Tweet Button */),
domain(/* Google +1 */)
{
html:before
{
content: none !important;
}
}
The content: none declaration disables the pseudo-element, preventing it from being rendered.
Having to exclude specific domains in this manner means this method is extremely limited and not very versatile at all, but it's the best I can think of.
You may want to try a different route:
html {
box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
}
Demo
This way the webpage is still useable when the user's browser doesn't support pointer-events.
You may also want to checkout this question: CSS - max z-index value
To apply these styles to only the parent document's <html> element, and not to iframes, simply apply the box-shadow to document.documentElement with JS:
document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
Edit:
I don't know about the addon thing but you could give your HTML tag an ID and target it that way, although if you want this to apply to all pages then that's an issue
or maybe use html:first-child ? I honestly don't know what will happen, you can give it a try though
CSS doesn't allow you to style HTML inside an iframe. Since you're using an add-on, this is a non-standard implementation of CSS. Styles are not inherited by iframes, because an iframe is basically a new browser window. The add-on is adding the style to every HTML page in the browser window. There's no way for the browser to know that a page is inside an iframe (at least not in a way that's accessible via CSS).
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.
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class