I have a web app that let users design their own invitation cards that are then ordered and printed by us, and send to the customer.
The problem we have is, it's difficult to print the cards, exactly the way the user designed it. We are currently using wkhtmltopdf to export a pdf file from the users design, that is then send to print. This has caused us months of headache. See this example:
As you can see, there are some important differences between the result of the HTML and the PDF. Most noticable is the line break of "Välkommen på". Other common differences is line-height changing so that text overlap eachother on the PDF file, because they are more, or less seperated from eachother than in the HTML.
My questions to you is:
Would you use this method or is there any other, simpler method could use to print the cards? For example, is there an easy way to just print the HTML itself from the browser (Auto fitting to the correct size of the content and so on), or do you have any other idea?
If you are a wkhtmltopdf wizard, do you know how we can solve issues like in the picture with the fonts?
I was able to solve the problem with the line breaks by using the CSS Attribute white-space: nowrap on all divs of my HTML content.
Related
ive been reading up on QR Codes a lot recently, I want to code my own generator with PHP. But i'm having trouble, as they are rather complicated, does anyone know of any tutorials for this sort of thing?
I found this, but I get stuck when trying to convert the result from page 3 to a 11-bit binary result. I'm also confused as to why "H" ASCII value is 17 on that table, but it is 72 on the ASCII table below...
The main issue i'm having is generating it, I was thinking about using a table for the pixels. I want to eventually be able to generate my own QR Code like the one below, but different text in the middle and different content:
I would suggest that you do NOT use tables for generating QR codes. This is way too much overhead for the browser, and if a browser renderes the box model that is off by 1 pixel, your whole image will be crap.
I would take a look at generating your images on the sever in php using GD2.
http://phpqrcode.sourceforge.net/
http://www.youtube.com/watch?v=sFVcOFmnZ9Y
If you really want to generate images inside the browser, you could probably get away with a HTML canvas tag.
If you want to add text I suggest you layer the text on-top using GD2. If you are using an SVG library I'm not exactly sure how to layer, but it should be simple. Here's an example of layering in GD2:
http://phpimageworkshop.com/
The thing to realize about QR codes is that they can store up to 30% redundant data. That means that you can "destroy" 30% of the code by layering an image on-top and it will still work. Here are some guides about customizing QR codes with logos etc:
http://blog.qr4.nl/post/QR-Code-Error-Recovery.aspx
http://mashable.com/2011/04/18/qr-code-design-tips/
There are many php classes and external libraries available to generate QR code using php. I have listed some of them below. You can refer these links.
http://phpqrcode.sourceforge.net/
http://www.phpclasses.org/package/6399-PHP-Generate-QR-Code-images-using-Google-Chart-API.html
http://qrcodescript.com/
I'm developing a WebApp in which I take an invoice converted from PDF to HTML, then parse the invoice lines.
I have a div in my main window which displays the contents.
But when I display the contents from the invoice in that div, all the contents appear overlapped.
In the converted invoice there is no table, only divs with absolute positioning. I can't make it any other way at least with this aproach, because that's the way the converter works.
So, as a solution I'm converting from "div to table", trying to decide when there is a change of row or not, based on the top parameter from the corresponding div.
However besides the invoice data, I also have the invoice header. I'm having difficulties to decide if the table is the same or not.
But so far, I think the solution passes through making 3 tables, one for the company logo, one for the header, and one for the data.
But I need all these tables to appear in the correct positions and with the correct sizes.
At the moment, I'm not allowed to paste invoice examples, and as I'm stuck in an early stage (close to the algorithm stage). I don't think any examples of my code and of the invoices could help anyone to understand the situation better.
But I promise to update this with examples soon.
As an alternative solution I could parse the PDF myself, but I haven't found a way to do it so far.
I'm using PHP to make the WebApp and verypdf pdf2html to make the conversion.
I know with that little information, is hard to get help.
Any ideas are welcome.
How about trying to cure the overlapping itself. For example you could strip all the styling information from the DIVs after the PDF is parsed into DIVs. Then you can apply your own styles.
It might be useful to know if all the invoices are in the same format/arrangement, or not.
I am working on a project that allows a user to upload text or content from an HTML page in Japanese and then use their cursor to select words in the text/content to translate into English. However, I would like to be able to expand this functionality to PDF files. Essentially, I'd like the user to be able to submit a PDF file and have the browser render that PDF file in such a way that when the user selects/highlights words in the PDF, the browser can somehow relay what the text of the highlighted section is, such as via javascript, to be then relayed to a PHP variable.
I know there are a lot of posts on stackoverflow asking similar questions (I've spent hours upon hours trying to sort through them all!), but I can't seem to find a definitive answer on whether this is possible. It seems there are lots of options for converting PDF to HTML or extracting text from PDF, but to be quite honest, I'm confused if any of those options are relevant to what I am trying to accomplish. And I know there's a javascript API for Adobe, but I'm under the impression the javascript needs to be embedded in the PDF already, which will not be true if the user is uploading their own PDF files to render. Even if that is possible, it seems there's no native text selection support in the Adobe javascript API....
Is there a straightforward workaround (oxymoron?) to doing this? Again, I want to be able to pass text selected in a PDF to a variable -- the effect is the user highlights words they don't know so those words can be added to a word bank for retrieval in a dictionary.
Let me know if I can be clearer on anything. Thank you!
I think your best bet is to convert the PDF to HTML (see this answers) and then you are already set as you already implemented everything for regular HTML.
I'm currently building an app for managing a small organization. One of the functions of the app is printing out a bunch of monthly letters to the members. The way it works is I pull data from the DB about the member (name, address, dates, etc...) and then populate a letter template that has placeholder variables for all the details.
After all the letters are populated I need to give the user the option to print the entire block of letters. This is where my problem comes in. I want it so that each letter would print on a single sheet of paper, and the content be centered and aligned in the middle of the page.
I've attempted to make a Print Media stylesheet and inject the content into a div which I then style to fill the page, but this solution doesn't seem to work properly mainly due to layout issues.
Is this something I should be doing with another format? Should I be sending this to Word or PDF for proper handling or is this something that can done with HTML, CSS?
Note: The stack i'm using is bog standard Linux/PHP and I can pretty much install any additional 3rd party library that I might need.
Any ideas?
HTML isn't very good for this job, especially if you have a single HTML page with many letters (i.e. you want each letter to start on a new page).
There are lots of PDF generation tools for PHP and PDF is actually rather good for print layouts.
PDF will let you control the fine-grained aspects of printing, such as keeping blocks together, when to start a new page and much, much more!
Which one is the best PDF-API for PHP?
O.K. so I'm developing a website to feature my fiction writings. I'm putting all of my documents into XML files, pulling and parsing them from the server with PHP and displaying them on the page. You can visit the page here for an example.
As implied from the background image, What I would like to do is take the text and split it into two columns, (with the text from the first spilling into the second), then allow for the overflow to be paginated so that there is no scrolling necessary. In other words, I'd like for the text to read like a book with the paging based on how long the body of the XML document is.
I would like for this to be done on the server side using PHP or something similar. Is there a way I can do this with an xsl stylesheet or a server-side script? I've been looking everywhere and can't seem to find anything.
Any help is appreciated.
Mr. Mutant
This is a surprisingly hard problem in general, and it's one you'll have no end of trouble with if you try to do it on the server. The problem with paginating HTML text is that where the page breaks go are entirely contingent on the client. The server doesn't know the client's screen resolution, font selection, or window size, and apart from the text itself those are the dependent variables for the problem.
I'd be surprised if at this point there weren't some jQuery library that just does this, but when I had to implement it myself about 7 years ago, here's the approach I took:
Create a div for each column. Each one contains the entirety of the document text. Style the divs with fixed line height. Put the column divs bottom in the document's z-order. Now you can lay out the rest of the page, leaving holes of known size in the layout that the divs can show through, and by manipulating the vertical position of each div you can control which line is the first to appear inside a given hole.
You can then let the client manipulate the font size, and as long as you recalculate the height of the holes and then reposition the divs properly, it will all magically work.
There may be ways of doing this in HTML5 that are easier; I would definitely look into that.