Is there any way to ensure that my grey font colors do not turn black?
Firefox and Chrome seem to do this in order to prevent white text on black background from turning into white on white. I do not have a background color (except white), so this browser-level conversion is not useful, it only helps in preventing grey colors for no reason.
Is there a way to turn this off? Or should I just stick with techniques like opacity, browser detection, and coloring my grays...
Solution:
#media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #ccc;
}
#media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #ccc;
-webkit-print-color-adjust: exact;
}
}
}
I found had to :
Add !important to the css rule... and...
In the Firefox print dialog, tick the option for "Appearance: Print background colors"
I couldn't get it to work in Chrome.
Some browsers add more respect to your gray if you add color: Replace #777 with #778. Be wary of opacity. Sometimes, even if the print preview will show great results, it only actually works on select printers. Printers with unlucky firmware will fail to print your text at all if it is gray using opacity.
You just need to output your grey font in svg. Browsers don't change color in svg. Here's an example:
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
I thought that is the only div on that page. Make the following change, it should work fine.
<style>
#media print {
div.red {
color: #cccccc !important;
}
</style>
And change the html of the div tag like below
I found that TEXT color is not inherited by "general purpose" stylesheet, but must be forced again in print css file.
In other words, even if text color is set in the general css file (one with media='all' attribute), it is ignored when printed, at least in Firefox and Chrome.
I found that writing again (redundant but..... necessary) text color in print css file (one with media='print' attribute), color now will be considered.
This solution working in all browsers:
.text{
color: transparent;
text-shadow: 2px 0 #red;
}
Give importance to color:
.bgcol{
background-color:skyblue !important;
}
.subject_content,h2,p{
color:rgba(255, 255, 255) !important;
margin: 25px auto;
}
<body class="bgcol">
<div class="subject_content">
<h2 class='text-center'>fhddfhnt area</h2>
<p>sdgdfghdfhdfh.</p>
</div>
Nothing above was working for me so I finally figured it out.
Always give colors to direct elements. Ex. Suppose your html is
<div class='div'><br/>
< h1>Text< /h1><br/>
</div>
and your CSS
.div {
color: #ccc;
}
This was my case. In this case no matter what you do the color won't show.
You have to do
.div h1 {
color: #ccc;
}
#media print {
.div h1 {
-webkit-print-color-adjust: exact;
}
}
Hope this helps you!!
Please reply if you find a better solution as this is what I could find after 2 hrs and it works for me.
Related
So basically the other day, I was messing around with Xcode.
I saw an Apple video explaining about UI and some new blur effects in IOS 13 so I tested it out and really liked it.
So what I achieved was an image with a blur effect and some text on top, but the text had a different blur than the image, so it was somehow see-tough.
Here is the result:
So basically I would like to achieve this using HTML and CSS but it looks quite difficult.
Is there any possible way to do this?
Thanks in advance anyway.
Using CSS, you can either use opacity property or use rgba colour values.
like so:
<style>
div.background {
background: url(https://loremflickr.com/320/240) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
/* using the opacity property */
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
/* Green background with 70% opacity */
color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
My computer isn't allowing me to see the image at the moment, but if you want to blur the background, you can use:
filter: blur(8px);
-webkit-filter: blur(8px);
etcetera, for each browser. Be sure to apply those styles to the image itself, and not the container.
You can check out the effect here: https://theexplorerblog.com/learning-base.php
Hope this helps.
When I use bootstrap, it removes the background color from everthing when I try to print my page.
Almost everything on my website is using bootstrap classes so I want to avoid a lot of manual CSS outside bootstrap.
I've found out that bootstrap uses #media print to remove the background color. I'm using a bootstrap theme as well (theme united) which is removing the background color as well.
theme-united.css
#media print
*, *:before, *:after {
background: rgba(0, 0, 0, 0) !important;
color: rgb(0, 0, 0) !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
bootstrap.min.css
#media print
*, :after, :before {
color: rgb(0, 0, 0)!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
Is there a way to make sure that the background color is not removed when printing without editing these 2 CSS files?
For example:
When I use .alert-danger, I want that alert danger printed as it is displayed on screen, so would be printed as a red box.
See JSFiddle:
http://jsfiddle.net/7mtk7wrh/
Unfortunately there is not a good answer to your question - but maybe if you understand the why's then you can choose a way forward.
Why?
It's true that Bootstrap uses the #media print { * { color: $fff; background: transparent; }} -- but there is a very solid reason. This bit of code is actually derived from the normalizer.css project (by a then college of #mdo 's, #necolas) - it's intent is to make all browsers behave the same. These guys chose to "normalise" the css for a very good reason:
With most browsers one can choose to include or exclude background color, so the behaviour is not standard across even the same browser. Imagine for a sec a website with very dark background with white text - when printing with backgrounds off, it will look like you're printing nothing - when actually you're printing white text on no (white) background.
There was no way to account for all the different uses of color, so they choose to go black (font) and white (background, actually 'transparent'). Even the choice of black was well thought of -- its a better print solution, as most color printers have more black "ink/toner" (more economical) and they don't need to mix color to make black (so faster).
Remember that Bootstrap is also a "framework" - so a starting point if you will - and kudos to #mdo and #necolas for having the foresight to think of this in terms of establishing a predictable baseline. (No, I don't know them.)
Nope...
So the thinking here is: "what if we could 'go back' and unset this. Unfortunately CSS does not work like that - yes browsers load the CSS declarations in a "queue" where the last declaration wins (LIFO, or last-in-first-out), but I'm not aware of a way to remove this stack. So CSS developers just add more to the end...
So one would assume that we can go back that way --- add a * { background-color: inherit }. Problem is that inherit reverts to the parent property, but * is the root, so it has nothing to revert to. Same goes for initial!
Maybe!
So we're left with 4 options, none of them is what you where hoping for, but it is what it is. In order of difficulty:
Download the BS (less or sass) source, edit the offending code, and then compile it. (You need to use a local copy, CDN's will not work.)
Download the CSS variant of your choice, search and delete the offending code. (No CDN's again.)
Use getbootstrap.com/customize to create a new variant - exclude "Print media styles" under "Common CSS". (Again, no CDN's)
Override the specific items who's color you want to print: e.g.
#media print {
.alert-danger {
color: yellow !important;
background-color: red !important;
}
}
CDN's copies of BS will now work, but then you have the problem of the user possibly not printing backgrounds and having the output white (yellow in the e.g.) on white!
Finally
Well I hope learning the why's was at the very least a way of you thinking of a workaround. General rule of thumb I follow is that when printing, the background is (should be) always white. When constrained that way you start thinking of novel ideas, like exclamation icons around the text that only "print" (#media only screen { .hidden-screen { display: none; }})
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<th>Name</th>
<th>School</th>
<th>Height</th>
<th>Weight</th>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > th {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
You can get this working by removing those lines from bootstrap.css file, there might be a jquery solution to this but it is much more complicated than erasing a few lines. :/
Or you could use a plugin called html2canvas as presented in this jsfiddle
I ended up here with the same problem but found the Chrome comes with a show background graphics option on the print dialog under more settings that did exactly that! No modification of Bootstrap (4) required.
#Vino explained really well. I was also facing problem because bootstrap.css makes background transparent forcefully. Thus I have customized the specific element in my custom CSS file. Remember to change <.element> with element where you want the colorful background instead of transparent.
#media print {
.element{
background-color: white !important;
box-shadow: inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
}
}
i had also face the same problem.. i just remove the bootstrap.min.css from my code then it work for me.
just make the specificity-value more specific and you should be ok.
something like:
#media print {
tbody>tr:nth-child(even)>td {
background-color: rgb(230, 216, 216) !important;
}
}
Actually, there is a solution, but this is still a hack.
It was used for a pdf generation in puppeteer, so it was tested only in this case, but most probably should work in all modern browsers.
Keep in mind that BOOTSTRAP_PRINT_RULE can be different in a different version of Bootstrap.
const BOOTSTRAP_PRINT_RULE = `#media print {
*, ::after, ::before { color: rgb(0, 0, 0) !important; text-shadow: none !important; background: 0px 0px !important; box-shadow: none !important; }
a, a:visited { text-decoration: underline; }
a[href]::after { content: " (" attr(href) ")"; }
abbr[title]::after { content: " (" attr(title) ")"; }
a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; }
blockquote, pre { border: 1px solid rgb(153, 153, 153); break-inside: avoid; }
thead { display: table-header-group; }
img, tr { break-inside: avoid; }
img { max-width: 100% !important; }
h2, h3, p { orphans: 3; widows: 3; }
h2, h3 { break-after: avoid; }
.navbar { display: none; }
.btn > .caret, .dropup > .btn > .caret { border-top-color: rgb(0, 0, 0) !important; }
.label { border: 1px solid rgb(0, 0, 0); }
.table { border-collapse: collapse !important; }
.table td, .table th { background-color: rgb(255, 255, 255) !important; }
.table-bordered td, .table-bordered th { border: 1px solid rgb(221, 221, 221) !important; }
}`
for (const styleSheet of document.styleSheets) {
for (const [index, rule] of Array.from(styleSheet.cssRules).entries()) {
if (rule.cssText && rule.cssText.includes(BOOTSTRAP_PRINT_RULE)) {
styleSheet.deleteRule(index)
return;
}
}
}
Since version 4 of Bootstrap with SASS you can actually set the following variable to false which will turn of this behavior:
$enable-print-styles: false
If this is not an option, there is the following script which brutally rips out all #media print annotations from the CSS. It assumes that Bootstrap is the first style sheet loaded and that it runs after Bootstrap has loaded.
var style = document.styleSheets[0];
[].forEach.call(style.cssRules || [], function (aRule, aIndex) {
if (aRule.cssText.indexOf("#media print") >= 0) {
style.deleteRule(aIndex);
}
});
You can use this (https://developer.mozilla.org/fr/docs/Web/CSS/print-color-adjust)
.your-selector {
-webkit-print-color-adjust: exact;
}
Warning: This is not standart, but might help you.
Suppose I have some text which is displayed over an image or some other printable colours. Is it possible to force this text to white when printing? The default behaviour is to force white to black or grey in most browsers. This clearly makes sense when you are printing text in containers with background colours/images which are removed, but doesn't make sense to force the text in the case where you are overlaying text on images.
I should probably mention that I am quite aware of the print stylesheet, it just so happens that regardless of setting the font colour, in IE/chrome/firefox, the font does not appear white regardless. It ends up black or grey depending on the browser. Please show an example of white text over an image if you think it's actually possible.
To illustrate see:
http://jsfiddle.net/NSwYE/
I personally don't think it's possible due to the way printing works. It's pretty annoying none-the-less.
This is not entirely in control of the web page author.
For example, this fiddle will print (at least it did for me on a Dell 1720 Laser Printer) white text on any of the three black backgrounds in
IE9
if the user has checked the box found next to:
Tools -> Print -> Page Setup -> "Print Background Colors and Images"
If that box is unchecked, then it will not print the black at all on the first two, but will on the last (since it is an img tag), but it prints the text as a grey, even over the img tag. Thus, it seems that the setting for "Print Background Colors and Images" affects how the browser interprets the text, and will allow a true white (knock-out effect) if checked, but not if unchecked.
Firefox
Checkbox found here (which seems to work):
File -> Page Setup -> "Print Background (colors & images)"
For Chrome? Web Page Author Controlled?
I have not yet verified whether the information from this post will do it or not (it does not work for me on my next fiddle, but it may be because it is in an iframe). For elements that should print in Chrome, try setting:
-webkit-print-color-adjust: exact;
Marked answer is wrong. You can control text color in every browser! You just need to output text in svg. Browsers don't change color in svg. Here's an example:
<svg height="40" width="200">
<text font-size="28px" y="25" x="30" fill="#ffffff" >
Some text
</text>
</svg>
print.css will help you, Eric meyer have a post about it.
For example html5boilerplate using this style on his css:
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
Update:
With your example html:
<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>
and my css:
#sometext {
position: absolute;
top: 125px;
left: 220px;
color: #FFF;
}
#media only print {
#sometext {
color: #FFF !important;
/* actually trick with white text-shadow not work ( */
text-shadow: 0 0 3px #FFF !important;
}
}
I get this demo. Is this an acceptable solution?
Solution:
#media print {
h1 {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 #fff;
}
#media print and (-webkit-min-device-pixel-ratio:0) {
h1 {
color: #fff;
-webkit-print-color-adjust: exact;
}
}
}
The example http://jsfiddle.net/NSwYE/ prints white text on top of the cat for me. But I'm using Firefox 3.6 and a Brother laser printer.
The behaviour of printers is entirely dependent on the printer driver and the application. My printer will print the example correctly using Firefox. It will print grey-scale text from Microsoft Publisher correctly. It will not print grey-scale text in Microsoft Word: text is always black.
Probably, if you use a print specific stylesheet that styles it as such.
e.g.
<link href="print.css" rel="stylesheet" media="print" />
It might be a bit overkill, but if this is something you need repeatedly, you might consider generating the content using either canvas or SVG (Raphael.js will provide IE support). Both canvas and SVG/VML elements will print with exact colours in major browsers.
/* Text color */
.element
{
color:transparent;
text-shadow:0 0 0 #fff;
}
/* Background color */
.element
{
box-shadow:0 0 0 1000px #000 inset;
}
In Internet Explorer, you need to enable background printing. Tested in Chrome 70, Firefox 60 (with disabled background printing also works) and IE11.
It doesn't need to calculate SVG width because SVG is not used.
Try adding an !important attribute to the css for it to print correctly, eg "color: white !important"
I am building a website and I am using the text-shadow function, however it doesnt work for IE.
Graphic:
text-shadow: 0.1em 0.1em 0.2em black;
Is there any solution or hack to over come this, or something that mimics the text-shadow function for IE.
For some versions of IE, Dropshadow filter may do what you need:
http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx
I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.
This is a combination of using CSS3 text-shadow, which has good support except IE, then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.
IE Filters:
The glow filter looks terrible, so I didn't use that.
David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.
I then combined some of the elements suggested on useragentman with the dropshadow filters.
Putting it together
This example would be black text with a white stroke. I'm using conditional HTML classes by the way to target IE (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/).
#myelement {
color: #000000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
background-color: white;
filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
zoom: 1;
}
The IE filter class also puts a shadow on any background images you have. For instance, I have an H1 tag that has a line as part of the background, when I put the IE text shadow filter on, the line in the background inherits that shadow.
I've been looking and investigating this issue also for some time now and would like to share a maybe contradictory finding while testing my site on IE10.
I have this html structure :
<p>Meer info op onze <a class="links" target="_self" href="/leden">ledenpagina</a></p>
combined with CSS :
p { display: inline-table;
color: #FFF;
text-shadow: 0px 1px 2px #111, 0px 1px 0px #111;
margin: 0px 20px; }
a.links {
text-decoration: underline;
color: #FFFF60;
font-size: 1.1em; }
If i look at the outcome of this in IE10, the achor text "ledenpagina" does receive the text-shadow style as defined in the parent (p tag).
The assumption this could have anything to do with a combined text-decoration:underline selector was false (tested by applying text-decoration also on the p tag)
Result can be witnessed here : http://tczelem.be (slide down the header slider tab)
So the text-decoration selector does seem to have some effect in IE10.
![enter image description here][2]
I'm trying to use a custom ::selection effect in Chrome but getting this bad blue coloration on highlighted text:
Here's my CSS:
::selection {
color:#ffffff;
background: #000000;
}
::-moz-selection {
color:#ffffff;
background: #000000;
}
::-webkit-selection {
color:#ffffff;
background: #000000;
}
I can't replicate the error in Firefox - is there anything I can do, or is it just a feature of the browser?
You want to wrap the text in a <p> tag.
I'm a little confused, because the selected text is applying the style from the code you're using... white text on a black background.
Is the light blue part the problem? If that's the case, I think the structure/css of the surrounding container(s) would be more helpful to get to the bottom of this.