I have an invoice in html that displays well on the screen. I want to print it to pre-formatted paper. the paper has three sections
Header (fixed height from the Top of the page)
Body (table made up of 1 - N rows)
Footer (fixed height from the bottom of the page)
I have tried using CSS and creating a div using #InvFooter and CSS
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
#page { size:8.5in 11in; margin: 2cm }
#InvFooter {position:absolute;left:50px;bottom:0px;}
I Have two problems I can't figure out.
How to anchor the footer to the bottom of the printed page.
How to limit the Body to a fixed section of the page and overflow into another page if the table has too many rows.
Simple answer: don't, html/css was never intended for printing. Even if you can "hack" absolute sizes to fit your current printer there is no guarantee they will fit the next (or the customer's).
For this reason PDF was invented, to give you want you expect in a printed format (as well as high portability).
By using PDF you are guaranteed to get a fixed (paper-) size.
You will be able to find free pdf-solutions (open source) as well as commercial solutions (such as for example Dynamic PDF - and there are many others) that allow you to generate PDF from .Net on the fly/dynamically from server based applications with no dependencies of Adobe products.
This is the best compilation of CSS printing techniques I've come across. It has deep links to the W3 standards, excellent examples, 3rd party recommended HTML -> PDF software and a handy JPEG which visializes the 16 different page-margin selectors. It got me started and now I can print over 100+ varying-length project summaries to bring with for executive reviews.
The article:
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
The handy-dandy page margin JPEG:
https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
The demo HTML book:
https://github.com/rachelandrew/css-for-print/blob/master/book.html
The demo print CSS:
https://github.com/rachelandrew/css-for-print/blob/master/pdf-styles.css
Hope this helps!
EDIT
These might be what you're looking for:
.invoice {
page-break-before: always;
}
.invoice h1.title {
page-break-after: avoid;
}
.invoice .line-item {
page-break-inside: avoid;
page-break-after: auto;
}
EDIT
How does formatted paper accommodate multi-page invoices? You must have to print every invoice individually... ugh
Related
I'm using Chrome v99 and a pretty basic usage of break-inside: avoid - but it does nothing.
Moderator: This is not a duplicate of this post and the 1 answer there isn't helpful.
My objective is to disallow the contents of all these divs from splitting at page breaks:
<div class="opt">
Here is my inline css:
<style media="screen" type="text/css">
#media print {
div.opt, table {
break-inside: avoid !important;
}
}
</style>
The full html is a bit lengthy but you can view the entirety here.
Simply press CTRL+P and observe that it page-breaks in the middle of divs with a class of opt - but it shouldn't because I'm using break-inside: avoid.
The example I linked to is very short and contrived, but my real scenario has many more sections and is dynamic, pulling from a database. So there's no way to know where the page is going to break relative to the divs. I just want the contents within those divs with that class to always stay together on the same page and never split across a page break. No div contents ever exceed a page, they are even shorter than my example.
Help, what am I doing wrong?
You have media=screen in the style tag...
Your print styles will only load when you're using a screen and not a printer
<style media="print" type="text/css">
div.opt, table {
break-inside: avoid !important;
}
</style>
When you fix it though it still seems to wrap onto multiple pages uglier but at least now you can play around with what print styles work
I tried to convert this html resume to pdf and print it but as you see there is a problem in template after changing. For example compare skills in both html version and pdf version.
This is Github repo of this project: https://github.com/xriley/DevResume-Theme
And this is a sample of HTML file: https://themes.3rdwavemedia.com/demo/devresume/
How can I fix it for ever?
I need this: https://themes.3rdwavemedia.com/wp-content/uploads/2019/04/DevResume-Sketch-Template-PDF-Preview.pdf
Solution 1 - Without Coding:
You can select margins as custom from more settings to make changes for each page accordingly.
Then you can drag these blue dotted borders to adjust text based on your need.
As i have drag thelower border upward to make senior developer text to appear in next page.
Solution 2 - With Coding:
Simply adjust margins for each page from solution 1.
Then by using the #page in your CSS. You can modify margins when printing a document. You can't change all CSS properties with #page. Only few properties such as margins while printing the page etc.
#page:first { <----- first here is refering to only First Page
margin-left: 0.75cm;
margin-top: 0.25cm;
margin-bottom: 0.25cm;
margin-right: 0.75cm;
}
If you want to apply margins on all page then simply do this:
#page { your margins values }
You can read more about #page property here.
I'm new to CSS (started looking at it yesterday!) so this is probably a very simple problem and hopefully someone will be able to help.
I can't seem to get any text to appear in the margin boxes of a print-formatted page.
Below is a very basic HTML snippet that should put "There should be something here!" in the top-left margin box and "This is the body of the page..." in the main page area.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type="text/css">
#page {
#top-left{
content: "There should be something here!";
}
size: A4 portrait;
margin: 50;
}
</STYLE>
</HEAD>
<BODY>
<P>This is the body of the page...
</BODY>
</HTML>
The body text appears but the margin text does not.
My ultimate aim is to create automated test reports so I need to have identical headers and footers for multiple pages and will fill the main page area with the test data.
Thanks in advance,
Pete.
#top-left is not supported from all engines.
See the anser on a simulare questions: CSS Paged Media Contents Issue
The generic recommendation for you would be to go through some html and css tutorials, css tricks (some methods and technics might be deprecated) or better to use official references alike MDN or official W3C.
If you find this extremely tricky for you, and you still feel the need, you may use HTML editors with WYSIWYG components, they will simplify the start for you.
I am trying to make a table printable, specifically never have it break a <td> entry in half, while maintaining proper borders. I am trying this:
#media print {
table.print-friendly tr td, table.print-friendly tr th {
page-break-inside: avoid;
}
}
However, this still causes a problem where the table data is missing upper or lower margins. Actually, I am not sure it does anything, because without it, the table misses the last margin on the first page. Easier to explain with an image here:
Plnkr here. Everything relevant is in index.html - I think you need to copy it to notepad and run locally to test printing. Note that the only relevant things in that code are the <style> definitions and the table classes.
To summarize - my goal is to make the table break properly AND maintain margins on print.
I have my course book as html parts chapter-by-chapter. I have done some modifies on it. It seems very well when it is read on webpage but when I want to convert it to pdf or print it it seems narrow. The issue is that how the page can be fitted in A4. If you look at output.pdf which can be found on main page. Besides, the shared links for you understand me. (especially page 47). I can merge them just in a pdf file. I think that if the css can be edited, it will be fitted in A4 and seems in pdf like a book. I need your helps. As an example you can look at ch18.html and ch19.pdf I can't write other links because of reputation. But all files can be looked from main page.
Pages: http://bookfiles.host-ed.me/ch18.html and ch19.html
Css file: http://bookfiles.host-ed.me/static/CACHE/css/ab0ffefbadc3.css
I absolutetly newbie about css. Thank for your helps.
The issue appears to be with your max-width on your "document" div. You have it set at several different places in your css file based on the screen size. I would go through them one by one and find the one that is affecting your print file. You need to set your max-width to 100%. Having a max-width less than 100% is what is causing it to print narrow.
Once you identify which one is causing the problem, you can add a new style that only goes into affect when you print.
Add this to your CSS file, for example:
#media print and (color){
#lesson-fragment, [role="document"] {
width: 100%;
max-width: 100%;
}
}
You can also put other specific print styles inside of the #media print code. Like if you wanted to change the font size or color only when it printed.