Does anyone have any suggestions on how I would start content always from next page when it's breaking between pages.
Example - I have list of photos which i am exporting to pdf.
While listing some photos are cutting in two parts first is coming in one page and remaining coming on other page so how we start photo which is breaking in two part should always display from starting of the page
.nobreak {
page-break-inside: avoid;
}
/* http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21 */
Big thanks to Unixmonkey
Related
I'm using Vala for Webkit (webkit2gtk-4.0) to display HTML content on WebView. Instead of showing the vertical scrollbars, I would like to break up the page into a smalled set of lines i.e. pagination. the attached picture will give an idea of the content i'm displaying.
Is there someway I can identify the number of lines when the content reaches the max page size and break up the content into the next page and so on. Is there a signal I can connect to which will help me do pagination. Here is the link to my code on GitHub: bookworm
The content has its own stylesheets and also images, so I cannot think of characters per line and no of lines per page to do the pagination.
Thanks in advance for any ideas.
In PDF generators you can normally describe a bounding box where if there is overflow it goes to a new page and you can include the content that wrapped it again.
I'm trying to figure out how to elegantly do this in Wicked, since we have a new requirement to allow users to generate their own PDFs from HTML.
The layout is roughly as follows:
[ address / logo ]
[ list of items purchased ]
[ footer ]
All the regions are a fixed size. With a handful of items there is no issue. If there are more than will fit in the region designated for the items purchased it cannot overflow. It needs to generate a new page break and put the overflow items on the following page (with the same header and footer wrapper).
I'm not sure there is a way to get a div's overflow to paginate like that in CSS though. (Prawn can do it, but it doesn't accept HTML). I don't know that something is going to overflow until it's rendered too, just knowing the count of items isn't enough.
Webkit doesn't really have good support for page breaking. I found out from their own page: "The current page breaking algorithm of WebKit leaves much to be desired.
Basically webkit will render everything into one long page, and then cut it up
into pages. This means that if you have two columns of text where one is
vertically shifted by half a line. Then webkit will cut a line into to pieces
display the top half on one page. And the bottom half on another page. It will
also break image in two and so on. If you are using the patched version of QT
you can use the CSS page-break-inside property to remedy this somewhat. There is
no easy solution to this problem, until this is solved try organizing your HTML
documents such that it contains many lines on which pages can be cut cleanly."
I realize that there are several other posts similar to this one, but I have tried every solution found within them and have not had any luck. Basically, I have a ColdFusion generated webpage that consists of a jQuery DataTable. I want to export the contents of the DataTable to PDF, however on certain tables where the table content exceeds the height of the page, the PDF adds my header area and then the rest of the page is blank. The table then shows up on page 2. Has anyone had trouble similar to this?
I've tried setting the page size, margins, #imports for the CSS, standard links for the CSS, inline CSS, and nothing seems to fix it.
Any help is greatly appreciated! Any suggestions are welcome too!
What ended up fixing this problem for me is I wrote a simple javascript function that takes two parameters, the id of the table requested and the max rows per page. My javascript function then grabs the entire table, and breaks it into separate tables using the max rows value as the number of rows per table. I then output the JS variable as the value for the tag and there are no longer incorrect page breaks.
I hope that in the future the cfdocument tag will be more proficient at knowing when it's reached the end of a page and break the content appropriately, but for now this works.
I have a Windows 8 app built using HTML & JavaScript. It has a ListView showing a dynamic list of places generated from a JSON data source.
I'm using Print Contract code from a MSDN sample (that shows how to print a page with static content) to implement printing functionality to this app. Only half of the list in the ListView shows up when printed.
How can I print the full list from the ListView & make it spread across multiple pages when the content is large?
The trick here is in providing a document to the MSApp.getHtmlPrintDocumentSource method that correctly represents what you want printed, which isn't necessarily the same as what's displayed on the page.
The sample you reference simply passes the current document object to getHtmlPrintDocumentSource, and is the easiest way to print, but as you've noticed, may not give you exactly the results you want.
A simple way to customize the output, as noted in chapter 15 of Kraig Brockschmidt's excellent (and free) ebook on HTML and JavaScript Windows Store apps, is to add a media query for the print media type, and use CSS to modify the output of the page, like so:
#media print {
.win-backbutton {
display: none;
}
.watermark {
display: none;
}
.titlearea {
font-size: xx-large;
}
}
This will not, however, likely solve the problem you're facing. In your case, what will probably work best is to create a separate page that provides output which is more print-friendly.
As an example, based on scenario 4 in the print contract sample, if I place an HTML page called print.html in the root of my app, I can reference it using the following code (note the ms-appx:/// scheme, which refers to content in my app package):
// set the alternate content
var alternateLink = document.createElement("link");
alternateLink.setAttribute("id", "alternateContent");
alternateLink.setAttribute("rel", "alternate");
alternateLink.setAttribute("href", "ms-appx:///print.html");
alternateLink.setAttribute("media", "print");
document.getElementsByTagName("head")[0].appendChild(alternateLink);
Now, when the devices charm is invoked, my alternate content page is supplied as the source for printing, rather than the current page. You can have your alternate page load the content from the JSON source and render it in a printer-friendly fashion, which may be different from how the content is displayed on the page.
For more info on Windows Store app development, register for Generation App.
I am grabbing text data from XML files, and want it to display in book page-like format inside a UIWebView on iPad. The XML files are coming out of a .epub, and each one contains a single chapter of a book, divided up only by p tags.
I want to dynamically paginate these files into book-like pages based on the size of the UIWebView, which is a full iPad screen, as well as by user-selected font size. I am currently loading a blank html page with related css into a UIWebView, grabbing paragraphs based on number of characters as Strings from the XML, and printing these into the html using StringByEvaluatingJavaScriptFromString and the innerHTML property.
Obviously, doing this by number of characters creates improperly spaced, oddly formatted pages, but I'm not sure how else to "paginate" the text.
What I am looking to do is something akin to the app "eReader" on iPad:http://www.ereader.com/. They seem to be breaking a single file up into pages dynamically, and loading it into UIWebViews. How is this done?
Most EPUB readers that are based on UIWebView simply use CSS3 Columns to paginate the document.
You can see this in action at http://www.quirksmode.org/css/multicolumn.html
The basic idea is that you 'columnize' the document and then scroll horizontally through it to show a specific page.
Having done this for one popular (Canadian) eReader application on the iPhone and iPad, I can tell you that the technique works but that it is far from ideal.
The code is already made. It is called epubjs. It is Javascript only epub reader.
Use UITextView with PageviewController . (specify your doubts in it , if any )