I am trying to print a page. In that page I have given a table a background color.
When I view the print preview in chrome its not taking on the background color property...
So I tried this property:
-webkit-print-color-adjust: exact;
but still its not showing the color.
http://jsfiddle.net/TbrtD/
.vendorListHeading {
background-color: #1a4567;
color: white;
-webkit-print-color-adjust: exact;
}
<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
<table class="table" style="margin-bottom: 0px;">
<thead>
<tr class="vendorListHeading" style="">
<th>Date</th>
<th>PO Number</th>
<th>Term</th>
<th>Tax</th>
<th>Quote Number</th>
<th>Status</th>
<th>Account Mgr</th>
<th>Shipping Method</th>
<th>Shipping Account</th>
<th style="width: 184px;">QA</th>
<th id="referenceSO">Reference</th>
<th id="referenceSO" style="width: 146px;">End-User Name</th>
<th id="referenceSO" style="width: 118px;">End-User's PO</th>
<th id="referenceSO" style="width: 148px;">Tracking Number</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>22</td>
<td>20130000</td>
<td>Jim B.</td>
<td>22</td>
<td>510 xxx yyyy</td>
<td>zznn#abc.co</td>
<td>PDF</td>
<td>12/23/2012</td>
<td>Approved</td>
<td>PDF</td>
<td id="referenceSO">12/23/2012</td>
<td id="referenceSO">Approved</td>
</tr>
</tbody>
</table>
</div>
The CSS property print-color-adjust: exact; works appropriately.
However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the #media print and #media screen.
Often times just setting up some extra #media print CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.
In your case, the print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other CSS with higher specificity.
While I do not endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:
#media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
print-color-adjust: exact;
}
}
#media print {
.vendorListHeading th {
color: white !important;
}
}
Here is the fiddle (and embedded for ease of print previewing).
That CSS property is all you need it works for me...When previewing in Chrome you have the option to see it BW and Color(Color: Options- Color or Black and white) so if you don't have that option, then I suggest to grab this Chrome extension and make your life easier:
https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en
The site you added on fiddle needs this in your media print css (you have it just need to add it...
media print CSS in the body:
#media print {
body {-webkit-print-color-adjust: exact;}
}
UPDATE
OK so your issue is bootstrap.css...it has a media print css as well as you do....you remove that and that should give you color....you need to either do your own or stick with bootstraps print css.
When I click print on this I see color....
http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/
Chrome will not render background-color, or several other styles, when printing if the background graphics setting is turned off.
This has nothing to do with css, #media, or specificity. You can probably hack your way around it, but the easiest way to get chrome to show the background-color and other graphics is to properly check this checkbox under More Settings.
I just needed to add the !important attribute onto the the background-color tag in order for it to show up, did not need the webkit part:
background-color: #f5f5f5 !important;
Your CSS must be like this:
#media print {
body {
-webkit-print-color-adjust: exact;
}
}
.vendorListHeading th {
background-color: #1a4567 !important;
color: white !important;
}
FOR THOSE USING BOOTSTRAP.CSS, this is the fix!
I have tried all the solutions and they weren't working... until I discovered that bootstrap.css had a super annoying #media print that resets all your colors, background-colors, shadows, etc...
#media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
So either remove this section from bootstrap.css (or bootstrap.min.css)
Or override these values in the css of the page you want to print in your own #media print
#media print {
body {
-webkit-print-color-adjust: exact;
}
.customClass{
//customCss + !important;
}
//more of your custom css
}
For IE
If you are using IE then go to print preview ( right click on document -> print preview ), go to settings and there is option "print background color and images", select that option and try.
If you are using bootstrap or any other 3rd party CSS, make sure you specify the media screen only on it, so you have the control of the print media type in your own CSS files:
<link rel="stylesheet" media="screen" href="">
if you are using Bootstrap.just use this code in your custom css file. Bootstrap removes all your colors in print preview.
#media print{
.box-text {
font-size: 27px !important;
color: blue !important;
-webkit-print-color-adjust: exact !important;
}
}
Are your sure this is a css issue ? There are some posts on google around this issue:
http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s
It may be related to the print process. On safari, which is webkit also, there is a checkbox to print background images and colors in the printer dialog.
Use the following in your #media print style sheet.
h1 {
background-color:#404040;
background-image:url("img/404040.png");
background-repeat:repeat;
box-shadow: inset 0 0 0 1000px #404040;
border:30px solid #404040;
height:0;
width:100%;
color:#FFFFFF !important;
margin:0 -20px;
line-height:0px;
}
Here are a couple things to note:
background-color is the absolute fallback and is there for posterity mostly.
background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not...
Set the box-shadow, if that doesn't work...
Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box.
Zero out the heigh/width depending on what you're controlling in the border attribute.
Font color will default to black unless you use !important
Set line-height to 0 to fix for the box not having physical dimension.
Make and host your own PNGs :-)
If the text in the block needs to wrap, put it in a div and position the div using position:relative; and remove line-height.
See my fiddle for a more detailed demonstration.
There's a style in the bootstrap css files under #media print{*,:after,:before ....} that has color and background styles labeled !important, which remove any background colors on any elements. Kill those two pieces of css and it will work.
Bootstrap is making the executing decision that you should never have any background color in prints, so you have to edit their css or have another !important style that is a higher precedence. Good job bootstrap...
I used purgatory101's answer but had trouble keeping all colours (icons, backgrounds, text colours etc...), especially that CSS stylesheets cannot be used with libraries which dynamically change DOM element's colours. Therefore here is a script that changes element's styles (background-colour and colour) before printing and clears styles once printing is done. It is useful to avoid writing a lot of CSS in a #media print stylesheet as it works whatever the page structure.
There is a part of the script that is specially made to keep FontAwesome icons color (or any element that uses a :before selector to insert coloured content).
JSFiddle showing the script in action
Compatibility: works in Chrome, I did not test other browsers.
function setColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var eltBackground = $(elements[i]).css('background-color');
var eltColor = $(elements[i]).css('color');
var elementStyle = elements[i].style;
if (eltBackground) {
elementStyle.oldBackgroundColor = {
value: elementStyle.backgroundColor,
importance: elementStyle.getPropertyPriority('background-color'),
};
elementStyle.setProperty('background-color', eltBackground, 'important');
}
if (eltColor) {
elementStyle.oldColor = {
value: elementStyle.color,
importance: elementStyle.getPropertyPriority('color'),
};
elementStyle.setProperty('color', eltColor, 'important');
}
}
}
function resetColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var elementStyle = elements[i].style;
if (elementStyle.oldBackgroundColor) {
elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
delete elementStyle.oldBackgroundColor;
} else {
elementStyle.setProperty('background-color', '', '');
}
if (elementStyle.oldColor) {
elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
delete elementStyle.oldColor;
} else {
elementStyle.setProperty('color', '', '');
}
}
}
function setIconColors(icons) {
var css = '';
$(icons).each(function (k, elt) {
var selector = $(elt)
.parents()
.map(function () { return this.tagName; })
.get()
.reverse()
.concat([this.nodeName])
.join('>');
var id = $(elt).attr('id');
if (id) {
selector += '#' + id;
}
var classNames = $(elt).attr('class');
if (classNames) {
selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
}
css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
});
$('head').append('<style id="print-icons-style">' + css + '</style>');
}
function resetIconColors() {
$('#print-icons-style').remove();
}
And then modify the window.print function to make it set the styles before printing and resetting them after.
window._originalPrint = window.print;
window.print = function() {
setColors('body *');
setIconColors('body .fa');
window._originalPrint();
setTimeout(function () {
resetColors('body *');
resetIconColors();
}, 100);
}
The part that finds icons paths to create CSS for :before elements is a copy from this SO answer
I tried all suggested solutions here (and in many other questions), such as applied background-color: #000 !important; both in stylesheet and inline, or set
#media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
, even combined them together, but nothing worked.
After hours of researching without any results, I recognized that the "bug" lost background-color only appears on table (th, td), but other HTML elements (div,...) or other CSS attributes (border-color,...) still work.
Therefore, I came up with a "hack" to wrap-up anything inside <th> or <td> with a <div> (you can adjust padding to make it display same as prior).
Here I used React and makeStyles of #material-ui/core.
JSX:
<Table bordered>
<thead className={classes.thead}>
<tr>
<th><div>Col 1</div></th>
<th><div>Col 2</div></th>
<th><div>Col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td className={classes.tdGreen}><div>Row 1 - Col 1</div></td>
<td><div>Row 1 - Col 2</div></td>
<td><div>Row 1 - Col 3</div></td>
</tr>
<tr>
<td><div>Row 2 - Col 1</div></td>
<td className={classes.tdBlue}><div>Row 2 - Col 2</div></td>
<td><div>Row 2 - Col 3</div></td>
</tr>
</tbody>
</Table>
Styles:
const useStyles = makeStyles(() => ({
thead: {
textAlign: 'center',
'& th:not(:last-child)': {
padding: '0',
'& > div': {
padding: '.75rem',
backgroundColor: '#D8D8D8 !important',
}
}
},
tdGreen: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'green !important',
}
},
tdBlue: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'blue !important',
}
}
}));
You can take the idea and convert it into pure HTML/CSS solutions.
Hope this can help anyone struggled with this issue!
You can also use the box-shadow property.
The best solution for this if you are using bootstrap so just do one thing remove #media print {} all code inside this. and enable background graphics from more settings while taking print preview.
You can use inline css styles with !important.
Eg.
<p style="background:red!important">ABCD</p>
If you are using nextjs or react add this to the global css:
#media print {
body {
-webkit-print-color-adjust: exact;
}
}
This worked for me.
you can download bootstrap 4 css from bootstrap web and looking on the bottom code
look where code is
and remove this css style because this override your css color table style
If you download Bootstrap without the "Print media styles" option, you will not have this problem and do not have to remove the "#media print" code manually in your bootstrap.css file.
I double load my external css source file and change the media="screen" to media="print" and all the borders for my table were shown
Try this :
<link rel="stylesheet" media="print" href="bootstrap.css" />
<link rel="stylesheet" media="screen" href="bootstrap.css" />
I have a php website which generate invoice in the form of html tables, I need to print these html tables to dot-matrix printer. I have tried to print webpage directly with browser print option, but it seems the printer treat it as image because it prints characters dot-by-dot instead of complete characters in a single pass like it would an ascii text file, which result in blurred characters.
Is there any way to make the printer treat it as text file? Or is there any way to convert html page to text file without losing the position styling(spacing, margins, etc)?
Or maybe there's an alternative approach I could use?
One thing to note is I can't use text-based browser to do this as it will be used by clients.
The invoice is a html table with small logo at the top-left, title, and description as thead, and simple table cell with borders as tbody.
I use Epson LX300+II printer.
<?php
// Download printer driver for dot matrix printer ex. 1979 Dot Matrix Regular or Consola
?>
<html>
<head>
<title>PHP to Dot Matrix Printer</title>
<style>
#font-face { font-family: kitfont; src: url('1979 Dot Matrix Regular.TTF'); }
.customFont { /* <div class="customFont" /> */
font-style: kitfont;
font-size:10;
}
#mainDiv {
height: 324px; /* height of receipt 4.5 inches*/
width: 618px; /* weight of receipt 8.6 inches*/
position:relative; /* positioned relative to its normal position */
}
#cqm { /* <img id="cqm" /> */
top: 10px; /* top is distance from top (x axis)*/
left: 105px; /* left is distance from left (y axis)*/
position:absolute; /* position absolute based on "top" and "left" parameters x and y */
}
#or_mto {
position: absolute;
left: 0px;
top: 0px;
z-index: -1; /*image */
}
#arpno {
top: 80px;
left: 10px;
position:absolute;
}
#payee {
top: 80px;
left: 200px;
position:absolute;
}
#credit {
top: 80px;
right: 30px; /* distance from right */
position:absolute;
}
#paydate {
top: 57px;
right: 120px;
position:absolute;
}
</style>
</head>
<body>
<?php
//sample data
$arpno = 1234567;
$payee = "Juan dela Cruz";
$credit = 10000;
$paydate = "Dec. 6, 2015" ;
?>
<div id="mainDiv"> <!-- invisible space -->
<div id="cqm" class="customFont">ABC TRADING</div>
<div id="arpno" class="customFont"><?php echo $arpno; ?></div>
<div id="payee" class="customFont"><?php echo $payee; ?></div>
<div id="credit" class="customFont"><?php echo $credit; ?></div>
<div id="paydate" class="customFont"><?php echo $paydate; ?></div>
<img id="or_mto" src="or_mto.jpg" /> <!---- sample for logo ---->
</div>
</body>
</html>
For anyone looking to print directly from browser to printer, and assuming you need to print text only, I found the answer in this post how-to-print-page-in-plain-text-format-for-matrix-dot-printer
Github for the application is here.
A simple tutorial can be found here.
Basically you install QZ Tray in your client machine and you add the script provided by them in your html.
Works OK in Windows 10 with a OKI 320 Turbo Dot Matrix Printer, but you have to change the driver for the printer to Generic / Text Only.
Then in javascript you just do something like this:
try {
await qz.websocket.connect();
console.log("connected")
const printer = await qz.printers.find("OKI");
console.log(`Printer ${printer} found !`);
const config = qz.configs.create(printer);
const data = [
'Some Data \n',
'More Data and More Data \n'
]
qz.print(config, data);
} catch(e) { console.log(e) }
Works like a charm!
We used to do this using a Java Applet that could write to the LPT port after due permissions on the browser and Java security.
However support for this has been phased out by all browsers. We are running it right now by using older versions of the browsers.
One way we are exploring is the possibility of a java service running on a port on the local PC and calling this service from the browser window.
an option to solve this problem is to download the TCPDF library https://tcpdf.org/docs/srcdoc/ and pass the reports to pdf but you have to download some dotmatrix type font and using the link http://www.xml-convert.com/en/convert-tff-font-to-afm-pfa-fpdf-tcpdf, convert fonts to the format that TCPDF uses.
I had almost same requirement like this, i didn't get a perfect solution, so I used an alternative solution,
converted the html to text with the help of "w3m"
send this text to a python script running on a client machine through socket communication
through the python script(used pyusb) i sent this text directly to the printer via USB and printed.
In this solution, can't get all the solution in print.
I have a responsive website and I need some PHP conditions depending on the windows width (or media queries).
Example:
if ($window_width > 1400px) {
echo 'Your window is wider than 1400px';
}
elseif ($window_width > 1000px) AND ($window_width < 1399px) {
echo 'Your window is between 1000px and 1399px';
}
else {
echo 'Your window is narrower than 1000px.';
}
Thanks for your help!
check this
Goolgle Mobile Detect
Try to use http://www.php.net/get_browser and check for isMobileDevice field. It might help only, of course, if the path to browscap.ini is set up in php.ini. If not, you can use php classes like https://github.com/garetjax/phpbrowscap
Nope you can not do it with php.
php is strictly server side
user javascript instead.
Below is my code to get device resolution using javascript
<script>
screenWidth = window.screen.width,
screenHeight = window.screen.height;
console.log(screenWidth);
console.log(screenHeight);
</script>
In views you can show/hide divs, something like this:
<style>
#web {display: block;}
#mobile {display: none;}
#media screen and (max-width: 320px) {
#web {display: none;}
#mobile {display: block;}
}
</style>
<div id="mobile">
<?php echo "is mobile"; //include("page_mobile.phtml"); ?>
</div>
<div id="web">
<?php echo "is web"; //include("page_web.phtml"); ?>
</div>
I'm assuming this is for device detection. I'm not sure if you can detect window width using PHP alone. If you can then this information would appear in the HTTP headers. I would recommend using an open source PHP class built for this: http://mobiledetect.net/
Here is the trick:
Evaluate the window width with js, then load your PHP in a frame and put the width in a parameter. Your PHP script then can read that parameter and perform different conditions depending on that value.
Here is the js part:
<script type="text/javascript">
var width = window.innerWidth;
document.write('<iframe src="content.php?w='+width+'"></iframe>');
</script>
Within your content.php file just read the width parameter and do something with it:
<?php
//Get width of browser window
$width = $_GET['w'];
echo ('width: '.$width);
?>
I have an array of various input boxes, that when filled, fills up the database with information. Then, from another file, I take the information and print it out to the screen.
What I want to do is to put a symbol in front of each line, however using something like .style br {}; doesn't seem to work.
Reading the from MySQL, using Wordpress if that matters.
EDIT:
I was asked to post how I want it to look like. I think this is pretty straight-forward, but here it is anyway:
# Entry1
# Entry2
# Entry3
EDIT #2:
I would prefer it to be in CSS, if that's not possible, then PHP. Javascript would be the last solution that I want.
I have tried the following and it didn't work at all:
.myform.lines br {
border-bottom: 1px dashed #000000;
background-color: #ffffff;
display: block;
}
Hi have a look at Can you target <br /> with css?
I tried the following html page:
<html><head><title>Test</title>
</head><body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('br').replaceWith('<br># ');
});
</script>
hi<br>
there<br>
testing<p>
again<p>
</body></html>
This results in
hi
# there
# testing
again
Here is some more code that also does basically the same thing - it adds a symbol (#) at the start of each line (assuming new lines follow a br).
<html><head><title>test2</title>
<script type="text/javascript">
function replaceLineBreaksWithHorizontalRulesInElement(element)
{
elems = element.getElementsByTagName( 'br' );
for ( var i = 0; i < elems.length; i ++ )
{
br = elems.item( i );
txt = document.createTextNode("# ");
br.parentNode.insertBefore(txt, br.nextSibling);
}
}
</script>
</head>
<body onload="replaceLineBreaksWithHorizontalRulesInElement(document)">
testing<br>
one<br>
two<br>
three<br>
four<br>
five<p>
six<p>
</body></html>
Note that this does work in both firefox and internet explorer giving the same results. If you remove the space however then firefox shows a space anyway, and internet explorer shows no space. I think this won't be an issue for you though, since you want the space.
How about
.mySelector:before { content: '#'; }
Okay, so I've been able to define the standard text color according to a database value by using this code:
<?php
echo '<div style="color: ' . $result->properties->fcolor . ';';<br />
echo 'background: ' . $result->properties->bgcolor;<br />
echo '">MY CONTENT</div>'
?>
The color that's set by
$results->properties->fcolor
works nicely, except for a:link, a:hover, a:visited, and a:active. Because it's only defining "color", the browsers default to their own link colors.
My users choose from a selection of background and font colors and Chrome's default blue link color doesn't exactly work with a dark purple background... Is it possible to set up a
<style type=text/css>
inside of my PHP file and have it reference the
$result->properties->fcolor
value that the normal part of the script pulls from my database?
This is my first big site so I'm not positive about anything but I vaguely remember enabling PHP in my external CSS file using .htaccess and it didn't successfully pull in the value of
$result->properties->fcolor
as far as I could tell.
What am I doing wrong?
Thanks in advance - amazing community here! :)
IF I'm you, I would create external css for links just to define rules not color.
for example if your links are inside div, what you can do is just define to use color of div
div a { color: inherit; }
div a:HOVER { color: inherit; }
so when you define your color to div through php logic your links inside div will inherit that color.
If you experience any problems with this add important to property so color of div will be used
div a {color: inherit !important; }
YOu can set you link colors via internal css
<style type="text/css">
a:link { color:#f00;}
a:visited { color : }
a:hover {}
a:active { }
</style>
Note:
1 orders are very important .
2 use hex value instead of color name.
Hi have you tried using " instead of ' and \" instead of "?
echo "<div style=\"color: " . $result->properties->fcolor . ";";
echo "background: " . $result->properties->bgcolor;
echo "\">MY CONTENT</div>";
And, you seem to be missing a semi colon at your 3rd echo.