Styling PDF's with multiple text columns

Question

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-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -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 1

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 it's 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:

• Supported CSS
• HTML attributes

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).

QUICK UDDATE ON LINK 2021: https://mpdf.github.io/