I am making a table of data that needs to printed out. I want the header to be at the top of each page. SO I am thinking the best way to do this is to repeat the header maybe every 30 columns or so, and break it into sections. But theres still no way to ensure that each section gets printed on its own page that I know of. Does anyone know how to do what I am trying to do? Main concern is just making the header at the top of each page when printing out the table of data.
Thanks!
Make sure your table headers are in the section of the table, then use CSS to style it:
thead { display: table-header-group; }
You may want to check out this article regarding paged media and css. It's a pretty good read and should get you going in the right direction.
Printing a Book with CSS: Boom!
An example using the page break css rules for a table.
#media print
{
table {page-break-after:always}
}
Here's also the w3c references to paged media.
CSS2
CSS3
sigh This one brings back memories. Over the years I have wrestled with browser printing. I finally threw in the towel, and now just send the user a PDF.
I (and my customers) are much happier with the results.
Related
I know there are many questions and many answers for this. Everyone has different problems with different solutions for different browsers.
I have tried many solutions from the below URLs. But nothing seems to work.
My output is as follows :
How can I avoid this kind of situation?
I don't want to mess up the table structure.
This table data are filled up dynamically using handlebars.js.
Links I have followed:
Link-1 Link-2 Link-3
.page-break is a div class which I have added after each section and that is working fine.
.Acc_Table is a table class which is shown in output image starting from SEARS/CBSD row and ending with payment history row.
How can I solve this?
Is it possible to close the table before the page break, put in the page break, and reopen the table after the page break?
Or what I wish to display the table on the next page only if it's breaking?
How can I achieve that?
have you checked if the table or if there is a div that is wrapped around it has the display: inline-block; or display: inline; CSS property?
I found out that while I was debugging some code for a printing problem that if the table is inline you get this effect. Try to put display: block or display: static, that works for me
This is my current problem.
I want to generate a HTML page, which contains about 40 coupons. Each coupon must be with one A4 sized section.
So, if I were to print the HTML document, I would like each printed page to contain 1 coupon.
Ideas on how I could accomplish this ?
The following CSS should achieve what you need, subistitute the class name for whatever is appropriate for your DOM structure
#media print {
.coupon-class
{
page-break-after:always;
}
}
This will always insert a page break after the element you can also use page-break-before to achieve a page break before an element.
You'll never get a very precise solution using HTML, as every browser decides its way of printing HTML is best and adds all sorts of headers and footers that change the page dimensions and how the clients printer actually prints it.
You would be better off generating a PDF of your coupons which you can easily do with PHP extensions.
You can do the steps below:
Define the width:100 for each coupon in its css styles. This will use maximum width of your paper.
Use page-break-after:always in css properties of each coupon. This will force the next coupon to be shown in the next page. (http://msdn.microsoft.com/en-us/library/ms530842(v=vs.85).aspx)
Don't forget to be careful about your coupons height. Try to avoid putting lots of rows in them.
You can use <fieldset> tag for each coupon and apply css properties on it.
I'm trying hard to give full HTML header/footer printing capabilities to our Mediboard project.
Long term, I know that CSS3 Page Media module will fulfill my needs, but that's two or three years away at least.
So I tried to make it work with CSS2 capabilities, and it almost works as you can see on this printable document. Yet, I still have a limitation on the footer where the content prints under the footer (see pages 3-4 with Print Preview).
Though I'm pretty sure the padding-bottom of the div.body used to make it work in Firefox 2.
Anyway, does someone have a tricky clue to help me on that problem?
EDIT:
To give more details, we currently have headers and footers by using elements positioned with position: fixed, with top:0 or bottom:0 depending if it is a header or a footer. This works well, and when printing, these elements are repeated on each page at the right position (see the "printable document" example). The only problem is when a page break occurs, the text is drawn behind these elements (see page 3/4)
EDIT2: Updated the document's URL
It looks like CSS2 has a #page rule in which you can define your page size and a margin:
#page { size:8.5in 11in; margin: 6em 1em 2em }
-or-
#page { size:auto; margin: 6em 1em 2em }
Unfortunately I don't have time to test it, but I would love to know if it works. I could use that.
I like what you're planning with the header/footer. Good work :)
From my experience, page-break doesn't work within an element. If an element such as [p][/p] spans two printed pages, the HTML code isn't aware where the break happens between the pages. This is because the user may sets their own printer margins be they 1 or 1.75 inches or some other value. Actual printer margins cannot be set via CSS. CSS can only set the margins and padding to the HTML page -- to the "printer's" defined margins. No information about printer settings, such as margins, is sent to browser. This explains why content is being underwritten under the header since the browser has no idea when the page feed happened. The easiest solution is just to have the header information on the first page but, that's not what you want. The brute force approach is to insert page breaks [br style="page-break-before: always;" /] within the paragraph at the appropriate place but, this isn't practical for a large number of documents. Also, subtle differences between printers including those from the same manufacturer differ subtlely - for exanmple, one print may print the content just fitting on one page, the next printer may have the last line on the next page even though both printers have the same margin settings. However, for tabular information ([table][/table]) assigning such CSS becomes easy to keep tables together. I'm speculating that one could count characters on a page and dynamically insert page breaks via javascript (easy, if you used JQuery) to approximate the brute force approach.
You will want to implement media types most likely. Please see http://www.w3.org/TR/CSS2/media.html for more information. You can have one CSS sheet that does not have a floating footer for printing, and the other for the screen.
<LINK REL="stylesheet" TYPE="text/css"
MEDIA="print, handheld" HREF="foo.css">
That is an example.
You can also consider making the footer invisible on the printed page if you do not need it.
For an iPhone ebook application I need to break arbitrarily long HTML documents up into pages which fit exactly on one screen. If I simply use UIWebView for this, the bottom-most lines tend to get displayed only partly: the rest disappears off the edge of the view.
So I assume I would need to know how many complete lines (or characters) would be displayed by the UIWebView, given the source HTML, and then feed it exactly the right amount of data. This probably involves lots of calculation, and the user also needs to be able to change fonts and sizes.
I have no idea if this is even possible, although apps like Stanza take HTML (epub) files and paginate them nicely. It's a long time since I looked at JavaScript, would that be an option worth looking at?
Any suggestions very much appreciated!
update
So I've hit upon a possible solution, using JavaScript to annotate the DOM-tree with sizes and positions of each element. It should then be possible to restructure the tree (using built-in XSLT or JavaScript), cutting it up in pages which fit exactly on the screen.
Remaining problem here is that this always breaks the page on paragraph-boundaries, since there is no access to the text at a lower level than the P-element. Perhaps this can be remedied by parsing the text into words, encapsulating each word in a SPAN-tag, repeating the measurement procedure above, and then only displaying the SPAN elements that fit onto the screen, inserting the remaining ones at the front of the next page.
All this sounds rather complicated. Am I talking any sense? Is there a simpler way?
You should look at the PagedMedia CSS module: http://www.w3.org/TR/css3-page/
CSS3 also support multicolumn layouts (google for "css3-multicol". I don't have enough Karma to include a second link here :-)
About your update: how about doing the layout of one single page, then use a DIV with overflow:hidden for the text part. Next thing would be to overlay a transparent item on top of that, that would programmatically scroll the inner content of the DIV PAGE_HEIGHT pixels up or down according to some navigation controls (or gestures).
The other option is to have a parent <div> with multiple css3 columns: link1, link2.
This works on Android:
<style type='text/css'>
div {
width: 1024px; // calculated
-webkit-column-gap: 0px;
-webkit-column-width: 320px; // calculated
}
p {
text-align: justify;
padding:10px;
}
</style>
The CSS multicol suggestions are very interesting! However, and I hope it's ok to respond with another question: how would you go from splitting one or more long <p> elements into columns to having one particular of these columns being rendered in a WebView? The DOM hasn't changed, so you can't pick out an element and render it. What am I missing?
I have an HTML table of data where each cell can have multiple lines of text. When the table is printed, it's possible for a row to be broken up so that some of the data appears at the bottom of the first page and some appears at the top of the next. Is there an equivalent to Word's "keep together" functionality that will prevent a page break from happening within a table row? I would think this would be a common problem, but the only "answer" I could find was hidden on a certain hyphenated web site. :)
Update:
The data will be viewed using IE 7, which it appears does not handle the "page-break-inside" property correctly (if at all). Are there alternatives? Is this something jQuery can help with?
try:
The CSS2-friendly way to do it would be
td { page-break-inside: avoid; }
see the page-break-inside definition
from: http://channel9.msdn.com/forums/TechOff/35322-Keep-with-next-when-printing-HTML-tables/
You may use CSS mediatypes to create printer friendly pages. A simple example is given in the following page. I believe it would help you solving the problem.
http://martybugs.net/articles/print.cgi