I want two printed copies of the invoice on the same A4 sheet. Is there anyway to achieve the same? It is guaranteed that the single print of the invoice(aka html table in my case), will not exceed more than half of the A4 sheet.
If I understood your question correctly, your .html file that will print out 2 invoices on an A4 page will first need to be prepared as an .html/.php file ( webpage ) and then printed.
I will also assume, you have created a dynamic page that pulls the data into the invoice.
/** style.css **/
.invoice {
margin-top: 2em;
}
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
#media print {
body{
width: 21cm;
height: 29.7cm;
margin: 20mm; /* Adjust margin as you like. */
}
* {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important} /* Black prints faster */
pre, blockquote {border: 1px solid #999; page-break-inside: avoid; }
thead {display: table-header-group; } /* Repeat header row at top of each printed page */
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}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="invoice">
Here is <span>First invoice table format</span>
</div>
<div class="invoice extra" style="color:green">
Here is <span>Second invoice table format</span>.
</div>
</body>
</html>
Related
So, I have a report html file that i'm generating and there are black boxes which require white texts/fonts in it. Everything is fine in a generic html display but when i try to print the page, ctrl + p or a custom print function, the text/fonts remain as their standard color, and not white.
Here are the codes I have;
CSS
#media print {
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
text-align: left;
font-weight: lighter;
font-size: 6px;
padding: 8px;
}
tr:nth-child(even) {
background-color: white;
}
.fprint{
background-color:black !important;
color:white !important;
font-size:8px;
-webkit-print-color-adjust: exact;
}
}
HTML
<div class="col-xs-12 fprint" style="background-color:black; color:white">
<p class="margB0 lang" tkey="name" style="padding-top:2px;padding-bottom:2px; padding-left:1px">PART 1 CFS CUSTOMER ACCEPTANCE CHECK</p>
</div>
Note that the background color changes just fine. But font color does not. What am I doing wrong here or what can be done to ensure that the font color is white on print?
Kindly add the following CSS line:
.fprint p{
color:white !important;
}
How do I prevent this behavior?
https://plnkr.co/edit/QoO2hWmXVhSCSyA4bUh4?p=preview
<style type="text/css">
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
#page {
size: auto; /* auto is the initial value */
margin: 5mm 7mm 5mm 7mm; /* margin you want for the content */
}
html {
background-color: #FFFFFF;
margin: 0px; /* this affects the margin on the html before sending to printer */
}
table { page-break-inside: avoid }
tr { page-break-inside: avoid; page-break-after: avoid }
thead { display: table-header-group }
tfoot { display: table-footer-group }
.paper {
font-size: 11pt;
-webkit-print-color-adjust: exact;
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
.website {
font-size: 11pt;
-webkit-print-color-adjust: exact;
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
.inline {
-webkit-print-color-adjust: exact;
display: inline-block;
width: 100%;
}
.customer-color {
-webkit-print-color-adjust: exact;
background-color: rgba(38, 194, 129, 0.1);
}
.partner-color {
-webkit-print-color-adjust: exact;
background-color: rgba(227, 91, 90, 0.1);
}
</style>
This is my css styling. You can try printing from plunkr and will see that this occurs,
I have tried the solution from following post, Why is Chrome cutting off text in my CSS3 multi-column layout? but couldn't fix the problem. The post seems to be from 2010 so perhaps there is a new solution for 2016?
I ran into a similar problem, and perhaps this might help. Check your CSS media queries.
Problem:
Printing causes content at the bottom of the page to be cut off/missing.
Theory:
Print: print.window detects page content/size (X)
Force paper-page size/layout with context (X)
Smaller paper-page size triggers CSS media queries
Layout changes. In my case bootstrap's col-md-6, removed float.
Which elongates the page (Y)
Y>X ==> produces missing content
My solution was to address the #media query to maintain my expected layout.
Helpful tool:
Chrome dev tools>More tools>Rendering>Emulate CSS Media>Print
I want my anchor tags to remain blue in color when I print it. Currently, when I print my webpage, the color of the anchor tag and everything (but images) changes to black. Here is the CSS I used
#media print {
a:link:after,
a:visited:after {
content: "" !important;
}
#media print {
.container {
width: auto;
}
.content{
font-style: italic;
color: #909090;
-webkit-print-color-adjust: exact;
}
#media print {
a,
a:link:after,
a:visited:after {
content: "" !important;
color: blue; /* or whatever color you want */
}
I've created a html page with a header,some content and a footer. I tried to get a print of the HTML page, and there was 2 pages. I got the header in first page and the footer in the last page.
What i really need is the header and footer to show in all the pages like in a word document.
I checked and found that using the table format with the thead and tfoot,it can be done.
It worked in firefox and IE, but it's not working in chrome. Is this some webkit browser compatibility problem??
Is there any other way which is compatible with all browsers.
Update: As of April 2021, the bug is still open https://bugs.webkit.org/show_bug.cgi?id=17205. as mentioned below by SHAKU here https://stackoverflow.com/a/34884220/2776433
You can target print styles specifically with the "#print" css media style definition. This will allow you to create individual styles strictly for when the document is being printed, and in print preview.
I would start with this as a solid base.
#media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none!important;
font-weight: normal!Important;
}
header, nav, footer {
overflow:visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after {
content: "";
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
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;
}
}
Use fixed positioned elements that you activate with print media type:
#header, #footer {
display: none;
}
#media print
{
#header, #footer {
position: fixed;
display: block;
top: 0;
}
#footer {
bottom: 0;
}
}
(Here assuming you have div elements with id header and footer).
I had the same problem and found simple tags to work best for me.
<table>
<thead>
<tr><td>
content that should be printed as page header
</td></tr>
</thead>
<tbody>
<tr><td>
content that will be spread over all pages consecutively
</td></tr>
</tbody>
</table>
The table will look like a simple table in the browser, but in printouts the content of the <thead> tag is repeated on each page. No CSS required.
Tested in Firefox 32, IE 11 and even in MS Word 2010. Word does not translate the tag into "real" page headers, but repeats the content on top of each page. (You may have to switch to "Page View" to actually see the difference in Word).
none of the above answers are not really the answer for the question asked. From my experience there is no single clean solution right now available. Feel like chrome is purposefully avoiding this bug. https://bugs.webkit.org/show_bug.cgi?id=17205.
BACKGROUND:
I would like to have small labels in columns of a table.
I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).
THE PROBLEM
With my current CSS approach, the vertical padding of the cell comes from the <span> element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place.
The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there.
I realize that I could use "non-breaking-space", but I would really like to avoid it.
I wonder if any of you have a fix / better way to do this? current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>
body {
width: 320px;
}
/* TABLE */
table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }
/* RELEVANT STUFF */
td {
padding: 3px;
}
td sup {
display: block;
}
td span {
display: block;
margin: 3px 0px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">something</th>
</tr>
<tr>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span></span></td><!-- No content, just a label -->
</tr>
</table>
</body>
</html>
As above, you can use:
td {
padding: 3px;
vertical-align:top;
}
If you wanted to retain the padding exactly, even on the invisible elements, you can force the hasLayout attribute on the empty span using:
td {
padding: 3px;
vertical-align:top;
}
td sup {
display: block;
}
td span {
display: inline-block;
margin: 3px 0px;
text-align: center;
width:100%;
}
The inline-block technique is discussed extensively at Drawing empty inline boxes in CSS?