Multi Columns CSS for rendering PDF in wkhtmltopdf - css

Question

I am trying to creating PDF from html using wkhtmltopdf libraray (https://github.com/wkhtmltopdf/wkhtmltopdf)
But ihave issue in creating two column pdf like newparers .
This issue is listed in a number of Posts, However, no solution is provided.
Using CSS,
.newsection { -webkit-column-count: 2; /* Chrome, Safari, Opera /
-moz-column-count: 2; / Firefox */
column-count: 2;}
does not render PDF with Newspaper style columns.
Desired output shown below;

Answer 1

try this brother.. :)
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1872#issuecomment-50742814
/* docs: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1872#issuecomment-50742814 */
.container-two-row {
/* You *must* define a fixed height which is
large enough to fit the whole content,
otherwise the layout is unpredictable. */
height: 28em;
/* Width and count aren't respected, but you
have to give at least some dummy value (??). */
-webkit-columns: 0 0;
/* This is the strange way to define the number of columns:
50% = 2 columns, 33% = 3 columns 25% = 4 columns */
width: 50%;
/* Gap and rule do work. */
-webkit-column-gap: 1px;
-webkit-column-rule: 1px solid black;
text-align: left;
}
.height-35em {
height: 35em;
}
.mt-15 {
margin-top: 15px;
}
<div class="container-two-row height-35em mt-15">
<strong>An Article</strong>
<div>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>