I am using pdfkit to generate a pdf which has
body{
background:#000000;
color:#ffffff
}
Everything looks fine on pdf digitally but on print black fades
I know pure black is not good for printing , so my question is
which black color hex code suits best for pritner?
Found this article useful but don't know how to use it in css. It also explains my problem
https://www.purebuttons.com/faq/achieve-true-rich-black-print
Ok i found the solution this is because #000000 return rgba(0,0,0,100) which is true black and bad for printing as 100% pure black ink is not available and it also loads printer
What i did is i used #060808 it is called rich black color rgba(75,68,67,90) it makes print perfect and didn't loads up the printer
Related
I'm using background-blend-mode: multiply to display a texture image tinted in different colors. The problem is, until the texture loads, the element briefly shows a bright colored rectangle. How do I avoid this, preferably showing nothing at all until the image loads? The usual tricks of using fallback color (background: #000 url(image.png)) don't seem to work because of blend mode.
How to remove the background color of a png using CSS?
I am working on a website where I need to stack a png icon over a background image. Since the image is from an external API, I cannot edit it, beforehand.
Blend Modes
So whilst browser support for these is pretty low, if you don't need to worry about IE/Edge/Mobile browsers this should be fine.
Pretty simple to use, what you'd want to do is apply your background-image and a background-color followed by your specified background-blend-mode
Whilst none will give you a perfect background change like that in image editing software, you'll get pretty close with multiply.
Eg:
background-image: url('yourimage.png');
background-color: blue;
background-blend-mode: multiply;
Option 1: Pure CSS [Limited Support]
The only way to do this is to use mix-blend-mode or background-blend-mode but unfortunately it is not supported in IE and Edge (check the support level here) If you need IE support see option 2.
You can read more about this CSS property here. By putting the blend mode to screen you can remove the white background of your png image.
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multiply;
Option 2: ImageMagick [Need Backend]
You can create your own backend endpoint that fetches the image from the API, remove the background using ImageMagick and return the new transparent image. If the Icon is small you can even embed the image into the API as encode base64. Base65 encoding and decoding has full browser support.
I am more and more using rgba color codes for text in my stylesheets as it easily sets a lighter or darker variation of the color I need (white 80%, black 40%, etc.).
Is there a downside in using rgba color codes as opposed to hexa codes for text? If I want a text to be grey, is rgba(0,0,0,.5) heavier to render than #898989?
Thanks!
I think this is more of a personal option. To me, using hexa codes is easier. It's the same thing at the end of it all. I think it really doesn't matter which one you choose, and won't make any noticeable difference concerning the performance. So, use what makes you more productive! :)
I'm working on a printing template in the browser for print-to-pdf, and am using a transparent .png overlay in one section.
This happens both with transparent .png files and transparent .gif files:
Chrome, when printing (both to .pdf, and in the print preview window), seems to outline transparent images with a 1px gray line:
Exhibit A:
I've tried this in several other browsers (including Safari) and none appear to do what Chrome does. Has anyone seen this before? I need to find a way to disable it or hack it on the Chrome side so that this will work across browsers.
To see this in action, click here: http://jsfiddle.net/brandonscript/nELwd/ (just an <img /> tag) and press Cmd/Ctrl+P to bring up the print preview. You'll see this in the preview and if you print to .pdf. Make sure you have "Background colors and images" enabled, or you won't see any images.
Note: I'm not looking for workarounds after it's been printed and I'm aware that if you size the image to 100% and view the .pdf at 100% zoom you don't see the gray line. I need to programmatically (or otherwise) remove the gray line prior to printing the .pdf.
I have experimented enough and considered all the answers above while doing so.
Suspiciously, Upon saving your image and opening in gimp and some pokes into it, What I found was this.
Which makes me think that your image in truth, containing the gray border around it. My suggestion is you remove that layer and make that empty space around the actual image to transparent.
EDIT(response to #remus comment)
I do not know if my claim is correct, but I am believing that the image is not what you are expecting it to be. You need to correct that image. I have tested with another image of mine, pasted on the fiddle is not having any border around it in screen and print preview. (And the final pdf too). Sorry if this Answer is correct and hurts you.
Though I haven't come across this exact issue, I do a lot of work with css printing (for pdf and browser printing) and more often than not I have to use 2 images: 1 for screen and 1 for printing (do not use transparency for the printing one in yuour case):
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay.gif' width='300' height='400' class="screen"/>
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay_print.gif' width='300' height='400' class="forPrinting"/>
in your main css file:
img.forPrinting { display:none }
in your print css file which should be declared after your main css file:
img.screen {display:none }
img.forPrinting { display:block; }
Short Answer:
Change your PDF printing preset to a higher resolution.
you'll get:
The Long version:
I noticed you have re-sized the image by changing its width height properties in the HTML code.
So I made sure your image is exactly in the size you need it and it will not have this strange contour.
See Link: jsfiddle.net/cyVqw/
I have a print preview:
PDF screenshot:
To verify that in any size the PDF will keep your image transparency I checked
PDF saved in a Higher resolution preset i.e. "Print Quality". this resulted in a large file but with better zooming quality:
Here is High Resolution 33% preview:
High Resolution 200% preview
So, what you need to do is to adjust your PDF quality preset.
I have a div with the property:
background-color: #327EB2;
When I open the page on a browser I notice that a different color is shown. If I capture the screen and open the captured image on Photoshop, I can see that the color code captured is actually #437BB6. I have nothing set with that color in my CSS stylesheet.
I've tested on different monitors, different color resolutions, different browsers and versions from FF 4+ to IE8+, Opera, Chrome, Safari, etc...
Actually I don't think that's a problem of the monitor, resolution or browser version, because the problem is that the code of the shown color is actually a totally different one!
Also, Photoshop warns me about #327EB2 which is not a "Web Safe color", but I don't think this is the problem because I often use non-websafe colors in my sheets and I've never had an issue like that.
** Fiddle: http://jsfiddle.net/286tE/
*UPDATE
The problem is that the div has a background image and a background-color. The background color has to match the last pixel's color of the background image (as usual), which is #327EB2.
Anyway, I can see a different color from the last pixel of the image to the background-color:
http://test.testblueday.eu/test/cbsissue.png
You can see the page here, the problem is shown after the "Top Marchi" list on the left side:
http://test.testblueday.eu/test/cbstest.html
I've left the plain CSS and JS (not compressed) to let you see all the properties.
** UPDATE 2
I use Mac, but we can see the problem also on Windows.
You problem has nothing to do with the CSS, the problem is in the image!
This is because the examples supplied by you show the correct #327EB2 at the extra background (the one "coloured" via CSS), and that is enough to know that the CSS part is ok.
Beware of colour corrections/management done in the file exported via Photoshop.
If you can't colour manage/revert to the desired colour, another solution is doing the opposite, change the CSS colour to match the last row of the image.
As far as I can see, everything works correctly. Your image at the bottom has color with code '#1080b3' - I just downloaded that picture (gradient_box_emboss.jpg) and took a color with colorpicker in GIMP. When I modify css like this:
.embosser {
background: #1080B3 url('/images/gradient_box_emboss.jpg') right top no-repeat;
color: white;
padding: 5px 6px;
}
Difference is missing. When I printscreen your site and paste it into GIMP, color picker shows color of that "wrong" background is #327eb2. When I open your image you have in your question, color of background is #307db7. It is in jpg and I suppose some color information were lost while compressing raw data to .jpg. Possibly, something similar happens when you are trying to get color in photoshop.
Possibly problem rise when you convert images from one format to another. Simplest fix is above - change color of background to one you have on your image.