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.
Related
I'm using phantom-html2pdf to generate pdfs dynamically in a Node app. The conversion works but the layout is completely off. For example the html document is a form that consists of sections sometimes with two columns side-by-side.
I am using MUI css for some styling and layout which has been in-lined into the HTML before the PDF conversion. After the PDF conversion everything is in one column, despite the fact that I have divs with class="mui-col-md-6" which render fine in the browser.
I've tried adding custom CSS and adding pageSize values but no matter what I do it's not producing the result I'm after.
Here is what I have in options at the moment. Note I've passed through some css where I try to "reshape" the document to make it more like the original HTML but it seems to have limited effect on the final layout. Also I set a negative border which helps a bit but doesn't remove PDF border completely as I'd like.
var pdfOptions = {
html: html, // html with in-lined MUI styles - columns not rendering
css: pdfCss, // This CSS seems to have has limited control over final layout
paperSize: {format: 'A4', orientation: 'portrait', border: '-2cm'}
}
If anyone has any advice on how to get more control over the layout to make it look more like my HTML I'd be very grateful. Cheers!
UPDATE
It appears that phantom-html2pdf ignores any inline css and only applies css passed in as part of the options. Again, I'm open to any pointers so correct me if I'm wrong or missing some steps to have more control over the final layout.
Just wondering if its possible to store invisible data in a HTML tag that activates the element but doesn't show data.
For instance, if I had a <h1></h1> element and I wanted the element to be active so the DOM would think there was a real header there and therefore include any additional properties (ie padding, margins etc) is it possible to have the element active by putting in something between that tags that wont display on the view?
I remember seeing something ages ago that did this but can't remember where from...
You can use visibility: hidden CSS like so:
<h1 style="visibility:hidden">...</h1>
Check out https://developer.mozilla.org/en-US/docs/Web/CSS/visibility for information about visibility.
EDIT:
In order to hide the contents of the heading, you could use JavaScript or a library like jQuery. Let's take jQuery for example. You could do something like this: https://jsfiddle.net/yanpbw1v/. In this example, I am saving h1's data into a variable and then clearing h1's data out.
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