I'm printing a page of my PHP application with the ( ctrl + P ) (default printing). How can i make sure that the CSS (tables, padding, cellspacing, background picture with opacity) are printed along on the sheet. I'm calling the CSS from another file.
Thanks for your help and time.
You must add this
html{-webkit-print-color-adjust:exact;}
To any css file of the project, ideally the print one, as the others won't load when printing. It will force chrome to use every background color and image exactly as coded.
Add this to your HTML page. Now you need to adjust your page manually, for fitting it to the print page. (use the preview function in Chrome)
<link rel="stylesheet" media="print" href="print.css">
The interesting part for the browser is media=print
You can find some more style commands for printing web pages here:
CSS How-to: Optimize Pages for Printing Using CSS
Printing a Book with CSS: Boom!
complete css guide - Printing
CSS Paged Media - #page Rule
You will need to include a print stylesheet, as detailed by Dan Lee. However that's only half the answer. The other half is that Chrome (and Safari) have poor printing options, and cannot print background-images, or background-colors. I had to figure this all out when trying creating a printable version of FullCalendar that used colors to differentiate between different types of calendar entries.
I include these directions for printing:
Firefox has the best print output, Internet Explorer is second.
You may want to turn on the Print Background option in your browser: In Firefox or Internet Explorer: Go to File -> Page Setup -> Check Print Background (colors and images)
Although Chrome and Safari will work, they do not have the print background options. It will be difficult to differentiate between the types of entries on the calendar.
If your page is simple enough, you can sub in actual <img>s instead, and use CSS to stretch and position them behind any text that might be in the div or td. That wasn't possible for the FullCalendar project I did, but it works fine on a simpler table. It's compatible with Chrome, Firefox, and IE, and doesn't require users to toggle a specific option to get the correct output.
This is as of Chrome 17.0.963.83 and Safari 5.1.4 on Windows.
Related
I'm working on a WordPress site and have an array of "icon blocks" that contains a selector for an svg, and a few other details I need for each icon block. In my template file I'm looping over these blocks and using wp_remote_get() to pull the contents of the selected svg file and insert it into my page's html.
Although I'm pulling back the contents of three unique files the first file is being displayed 3 times, here is a screenshot (This is in Chrome):
However, if I open the same page in Safari I get the same repeating icons, but with a different icon. Here is the Safari screenshot:
If you run a dif on the svg's on the page, they are indeed different svgs.
Any help would be appreciated. Here is a link to the staging site if you want to look at it there.
Make sure to use unique ids - the three SVG snippets repeat some. The lines
<clipPath id="clip-path">
and
<g style="clip-path:url(#clip-path)">
After importing they are all part of the same document, and references fail.
In my PHP based admin panel, I've a button "Print Message", which print a receipt table. Currently I've no printer so I am saving this receipt as PDF (using 'save as pdf' option from print section in chrome).
I want to change the font-face and font color of this PDF document. I've tried several options like
- Inline CSS on target table.
- External CSS file with media="print" attribute.
- #media print{} media query.
but nothing worked for me.
When I am using the system installed fonts, its working and showing result on my system but when I am using attached font using #font-face, its not working.
I hope someone here can help me.
Thanks.
Have a look at PrinceXML.
It's definitely the best HTML/CSS to PDF converter out there, although it's not free (But hey, your programming is not free either, so if it saves you 10 hours of work, you're home free (since you also need to take into account that the alternative solutions will require you to setup a dedicated server with the right software)
For more info look here: https://stackoverflow.com/a/434827/4958186
I've just switched over a database for a front end website and some strange CSS is appearing under just one image, but I cannot find the CSS in the code, in fact i'm pretty sure it's not there.
This is looking at the code in browser using google chrome:
As you can see no CSS.
But in Safari:
Lots of CSS is added on the end of just this one image. The images are pulled from a database and displayed on screen, this was working before i switched the database over, and I can't seem to find it in the code:
As you can see it's not being added inline when it's echoed onto the page
My question is ... what could be causing this inline CSS to be added to this one image and is there anyway to find out where it came from?
If it safari on mac with retina display, some of the libraries can add styles to the image
As it turns out, the plugin ad blocker was blocking my image.
How can I print a receipt sheet "800 mm width" via my web application?
I tried many times but can't get a cross-browser support for this feature,
for example, Chrome shrinks the page and print a "blurred" text on the receipt, but Firefox just print the right side only of the page "magnified, as if it was an A4 page".
also, after some searching there's no specific solid code to use.
so, what's the best practice to follow in order to enable receipt-printing on our web applications?
Thanks!
Can't post the receipt picture because I'm new here :)
I solved this issue with two actions: i) Table column set to 350 width. ii) Use a css just for printed output. For example, one css file to web display and a second css file that must be invoked just by scripts whose action is to print something.
Also when calling the css stylesheet use media="print" in the same <link href=....>
I have a website which works fine in all browsers except in IE6. The pages content is inside a div loaded with a background image. The page layout gets very nasty and image does not load when the page is opened for first time, but when the same page is opened for the second time and any subsequent times, then it loads perfectly. This scenario is with every page in the site.
Please help.
You might be suffering from FOUC. (Flash Of Unstyled Content) whereby IE6 for whatever reason isn't rendering your content correctly on the first load. (we would need to see sample code or a URL to determine why)
The 2nd - Nth reloads may work well once some of the content is cached by the browser.
updates
Ok, now seeing the site a few more details. The div that loads the new content is floated over an animated flash background... and the divs appear to use a png image background with transparency (IE6 doesn't support PNG Alpha (the part that does transparency)) thus IE loads an ugly image first, and then it looks like you have a hook in there to swap it out with a filter in IE. (I'm kind of guessing at the moment as the PC I'm on with IE6 is rather slow and the flash appears to be very cpu intensive)
Since this PC is slow, I see the text/form content load before the background image... I'm wondering (if you are applying a filter in IE6, if that is being executed before the image is fully loaded and thus the end result looks odd) but due to browser caching, the 2nd/Nth loads are ok?
I need to dig a bit deeper, but I don't have all the tools I need here. Hopefully later today I can check this out a bit more (or someone else will)