Styling PDF's with multiple text columns - php

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/

Answer 2

Add to add multi column function in the mpdf use the following code
<columns column-count="3" vAlign="J" column-gap="2"/>
<!-- add the dive with text etc here-->
<columns/>
For more details you check this website https://mpdf.github.io/reference/html-control-tags/columns.html

Answer 3

I found this in php
.row {
display:table;
width: 100%;
clear: both;
}
.col-lg-4 {
float: left;
width: 32.83%;
border:1px solid blue;
}
and php code here
<?php
$d = [1,2,3,4,5,6,7,8,9,10,11,12,13,14];
$cols = 3;
$dRowLen = ceil(count($d) / $cols);
?>
<?php for($i=0;$i<$dRowLen;$i++){ ?>
<div class="row">
<?php
$z = $i*$cols;
for($v=0;$v<$cols;$v++){
if(isset($d[$z+$v])){
?>
<div class="col-lg-4">
<?php echo $d[$z+$v];?>
</div>
<?php
}
}
?>
</div>
<?php } ?>