zzipper72 zzipper72 - 1 year ago 71
CSS Question

Styling PDF's with multiple text columns

This is a PDF or HTML styling question: I want multiple text columns in my PDF.
I have a custom modification to PDFMaker's PDF Export tool for Vtiger. For the moment it looks as if I can only style inline in the elemnt style tag, generated from the php export module.

When using the text/code editor in the browser, my styles work fine. I am able to create text columns and everything looks great! (Thank to this genius! : http://jsfiddle.net/jalbertbowdenii/7Chkz/ ) ...I'm using this exact code, only inline.

.cols {
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;

But when I export to PDF, it will not render columns..it stacks my child divs.
*Note: I did change all percentages to fixed widths (pdf seems to not like percentages...not sure on this, but seems like it)

So, is there something special about styling for PDF's to make it recognize columns? Or is there a proven work around in CSS to achieve multiple text columns?

Thanks in advance, Stackoverflow rocks!

Answer Source

Ok, so after a few days and no replies, here is what I found out. There are Different PDF "classes" ( not sure how to define class in this context) ...but its the library of code that interprets different forms of code for rendering a PDF, I've seen PHP, JQuery and HTML.

For the answer to my question, I needed to know what HTML styles the PDF 'class' I was using would work. It turns out that the library/class I was using was called mPDF

This class had nice documentation of styles and attributes it supports:

After reading through the docs, it appears that the 'column-count' style is not supported as well as floats are limited. It appears I can not achieve the 'masonry' style layout I'm looking for. (at this time)

I hope this helps someone else. If my use of the term class or library is confusing/incorrect, please freely comment to correct me on that and I will edit to clarify for future researchers on this topic.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download