I have a site that I'm trying to make a printable version and I'm using a new print stylesheet, but I'm having a problem. I have a DIV for star ratings that is just an empty DIV in the html file, but in the regular CSS I have background images for the actual stars.
The DIV in the html file looks like this:
<div class="example_rating"></div>
The code in the regular stylesheet looks like this:
.example_rating {
height:40px;
width:200px;
margin-left:20%;
background: url('../stars.png') no-repeat scroll 0 0 transparent;
}
My problem is that the star ratings aren't showing up at all in the printable format of the web page. I don't have the DIV hidden or anything, but I'm not sure what I can do to get it to show up in the printable format.
I realize the question may be a little vague, but I'm not sure how else to explain it. I can definitely give more details if need though. Thanks!
In your CSS, the stars are rendered as a background image, and when printing, backgrounds aren't usually displayed by default.
You'll either have to display the stars as an <img>, or tell your users to enable printing of backgrounds.
EDIT:
The easiest way to get round this would be to print the star rating as text as well as the background image, and then have the font inside the div transparent (and yellow in the print stylesheet). Example:
<div class="example_rating">
4/5 stars.
</div>
Stylesheet:
.example_rating {
color:Transparent;
/* Alternatively: text-indent: -9999px; */
height:40px;
width:200px;
margin-left:20%;
background: url('../stars.png') no-repeat scroll 0 0 transparent;
}
EDIT 2:
You could try putting this in your print stylesheet:
.example_rating {
background: none;
}
.example_rating:after {
content: '4/5 stars'
}
This puts some text inside the div using CSS, and if you put it in your print stylesheet only, it will only appear when you print!
Try making a new print only stylesheet... like this:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Or in you current stylesheet, put your printing styles in
#media print {
}
Related
Using symbols in SVG formats seems like a good idea to me, so you can only load a single SVG file, and use it as a sort of spritemap.
It feels wrong to me though, to directly include the <svg></svg> tags in my html for icons, since they are presentation only and should be added in my CSS.
Is there a way to add a symbol from an svg in an :after pseudo element in my CSS?
You can refer to fragments in CSS this way (fragments must have an ID to identified):
.element {
background-image: url('vector.svg#fragment');
}
You can also show a specific area by clipping it with viewBox:
.element {
background-image: url('vector.svg#fragment(viewBox(0,0,25,25))');
}
Here you can read more about this methods:
http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
Another method could be to create all your symbols in a icon font.
As Blazemonger mentioned in comment you can give it inside the content of an afterelement.
But if you are setting it as a background of an after you would have more control over it regarding its size,position and any other properties a background image can have
html
<div id = "mydiv"><div>
css
#mydiv{
width:500px;
height:100px;
background:tomato;
}
#mydiv:after{
content:"After of #mydiv";
width:500px;
height:100px;
background:url('http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg') no-repeat;
position:absolute;
top:200px;
border:solid 1px tomato;
}
You can save the svg as a separate file and give it as url for background
DEMO
Read more on ways of adding SVG to page here
I want to use a standard set of buttons on a website regardless of what is written in them (i.e. submit, pay, go, spell correct) but for some reason I can not get the sprite image to show up. My codes is as follows:
HTML:
<div id="iconic">
Place Sprite button here <span><a class="button" href="#">Test</a></span>
</div>
CSS:
span.iconic a:link
span.iconic a:visited
{
display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
}
span.iconic a:hover
{
background-position: 0 -50px;
}
span.iconica a:active
{
background-position: 0 -100px;
}
Any suggestions on how to get this to display with the text on top (in this case it will have the button with the word "test" on it.
Thanks in advance.
According to your posted css you are attempting to manipulate a link inside a span with the class of "iconic"... and that doesn't work with what you have in the html:
to get you on the right track, try
replacing all the span.iconic's
with #iconic span's
#iconic span a translates to "all <a>'s inside a <span> inside any element with the id of 'iconic' "
In CSS:
. is used for to prefix class names
# is used to prefix IDs.
Your element is a DIV, and you're specifying a SPAN in your CSS. You've got both of these mixed up.
The CSS declaration for <div id="iconic">
would be:
#iconic {
...
}
You may want to consider looking at Font Awesome, that handles a lot of this for you.
I'm making some printable calendar website using HTML, CSS and JS.
Unfortunately I cannot use CSS property called text-shadow, because shadow behind text prints as solid black text without any blur or transparency.
Same problem occurs when I'm trying to use box-shadow for any div - shadow prints like solid black color with no transparency.
I'm using Chrome with style html {-webkit-print-color-adjust: exact;} to ensure all background colors will be printed.
Any workaround? I would prefer not to use any background image.
Edit:
I don't want to hide shadows, it's very easy of course. I want to have shadows printed correctly.
I realise this is an old question, but just to note that it is possible to make shadows print correctly in Chrome. You need to set both -webkit-print-color-adjust and a filter, as found in this bug thread: https://code.google.com/p/chromium/issues/detail?id=174583
.thing {
-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
}
(I prefer to set opacity rather than blur as used in the bug, simply because it seems likely to cause fewer problems).
Note that this will limit the resolution of the print (filter makes it send a rasterised version), so text might become harder to read. If you really want to work around that, I'd suggest duplicating the div (one for the shadow, with the filter hack and transparent text, and another for the text with no shadow)
Here is the solution:
#media print {
.item {
-webkit-filter: drop-shadow(4px 4px 1px #ccc);
text-shadow: 4px 4px 1px #ccc;
}
}
If anyone is looking for a way to avoid rasterizing the content of the element with a box-shadow, this is what I used (extended from #Dave's answer):
.thing {
position: relative;
}
.thing::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: /* define your shadow here, not in .thing */;
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
This creates a pseudo-element at the beginning of the element you want to have a shadow. The pseudo-element is sized the same as the parent and then the drop shadow is applied to it only. That way, the drop shadow can be rasterized while the rest of the content of the parent is not.
There are a few issues if you have borders, if your element doesn't support children, etc. but this works in most cases.
I used all the possible solutions to this but the border shadow(with stepped gradient) would show up on my page, but not when I do a Ctrl+P on the page and either- print the page or save as PDF. I even used-
-webkit-print-color-adjust:exact;
-webkit-filter:opacity(1);
I do the same Ctrl+P on this page- https://css-tricks.com/examples/BodyBorder/kottke.php and it works fine.
Solution: I had to remove the bootstrap.css included at the top of my page for the border shadow to show up on my PDF, or when I print the page.
<link href="/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" >
I tried
html {
-webkit-print-color-adjust: exact;
-webkit-filter: opacity(1);
}
But it causes links on PDF non-clickable for unknown reason.
After I change it to the css below, both shadow and link problems are solved.
.thing {
-webkit-print-color-adjust: exact;
-webkit-filter: blur(0);
}
You don't need to compromise your web page to make it look pretty printed. Simply define a print.css that makes the printed view suit your needs.
# index.html
<head>
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
</head>
# print.css
.shadow {
text-shadow: none;
}
For more, Smashing Magazine has a helpful article on How To Set Up A Print Style Sheet.
This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)
Another solution on that same question suggests using list-style-image, which only works if you have a different image for every icon, no CSS sprites possible.
Aside from creating a separate page with the icons inline, is there another solution?
With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this.
Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application.
Essentially, you add the #media print to the end of your stylesheet and change the body background slightly.
Example, if your current CSS looks like this:
body {
background:url(images/mybg.png) no-repeat;
}
At the end of your stylesheet, you add:
#media print {
body {
content:url(images/mybg.png);
}
}
This adds the image to the body as a "foreground" image, thus making it printable.
You may need to add some additional CSS to make the z-index proper. But again, its up to how your page is laid out.
This worked for me when I couldn't get a header image to show up in print view.
You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.
The below code works well for me (at least for Chrome).
I also added some margin and page orientation controls.(portrait, landscape)
<style type="text/css" media="print">
#media print {
body {-webkit-print-color-adjust: exact;}
}
#page {
size:A4 landscape;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
-webkit-print-color-adjust: exact;
}
</style>
Make sure to use the !important attribute. This dramatically increases the likelihood your styles are retained when printed.
#example1 {
background:url(image.png) no-repeat !important;
}
#example2 {
background-color: #123456 !important;
}
Like #ckpepper02 said, the body content:url option works well. I found however that if you modify it slightly you can just use it to add a header image of sorts using the :before pseudo element as follows.
#media print {
body:before { content: url(img/printlogo.png);}
}
That will slip the image at the top of the page, and from my limited testing, it works in Chrome and the IE9
-hanz
Use psuedo-elements. While many browsers will ignore background images, psuedo-elements with their content set to an image are technically NOT background images. You can then position the background image roughly where the image should have gone (though it's not as easy or precise as the original image).
One drawback is that for this to work in Chrome, you need to specify this behavior outside of your print media query, and then make it visible in the print media query block. So, something like this...
.image:before{
visibility:hidden;
position:absolute;
content: url("your/image/path");
}
#media print {
.image{
position:relative;
}
.image:before{
visibility:visible;
top:etc...
}
}
The drawback is that the image will often be downloaded on normal page loads, adding unnecessary bulk. You can avoid that by just using the same image/path you'd already used for the original, visible image.
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 that
.inputbg {
background: url('inputbg.png') !important;
}
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this. Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
Note: It's not working on the entire body but you could speciy it for a inner element or a container div element.
You can use borders for fixed colors.
borderTop: solid 15px black;
and for gradient background you can use:
box-sizing: border-box;
border-style: solid;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-image: linear-gradient(to right, red, blue) 100%;
border-image-slice: 1;
border-width: 18px;
https://gist.github.com/danomanion/6175687 proposes an elegant solution, using a custom bullet in place of a background image. In this example, the aim is to apply a background image to an a element with class logo. (You should substitute these for the identifier of the element you wish to style.)
a.logo {
display: list-item;
list-style-image: url("../images/desired-background.png");
list-style-position: inside;
}
By including this within a
#media print {
}
block, I'm able to replace a white-on-transparent logo on the screen, rendered as a background-image, with a black-on-transparent logo for print.
You can do some tricks like that:
<style>
#page {
size: 21cm 29.7cm;
size: landscape
/*margin: 30mm 45mm 30mm 45mm;*/
}
.whater{
opacity: 0.05;
height: 100%;
width: 100%;
position: absolute;
z-index: 9999;
}
</style>
In body tag:
<img src="YOUR IMAGE URL" class="whater"/>
Lets say I have a header banner on a webpage I'm about to print. Instead of wasting someone's ink printing the entire block of the image, is there a way via css to replace the image with text of H1 size?
I usually just add the following to my style sheet:
.nodisplay
{
display: none;
}
#media print {
* {
background-color: white !important;
background-image: none !important;
}
.noprint
{
display: none;
}
}
And then assign the noprint class to elements which shouldn't be printed:
<div class="noprint">
</div>
And for your example, something like the following should work:
<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>
You could put an h1 element and an image in the same place in the source, and have the image CSS display:none for print media, and have the h1 set to display:none for screen media.
Bryan, typically on things like logos I use image replacement for the graphic anyway so the logo itself is really in an H1 tag. Then in my print style sheet. I do something like this...
h1#logo a, h1#home-logo{
text-indent: 0 !important;
background-image: none !important;
font-size: 1.2em !important;
display: block !important;
height: 1em !important;
width: 100% !important;
text-decoration: none !important;
color: black !important;
}
Which removes the image replacement and shows the text. Make sure of course that you call this stylesheet separately using media="print".
Adding to Adam's solution: If your text is fixed ("head banner was there" not "ad for such and such was there"), you can use :before or :after pseudo-elements to insert text instead of having the text pre-inserted in the HTML.
I makes your HTML lighter if you are replacing many images with the same text.
I have to say that I dislike this CSS feature, but it is there if you want to use it.