Multi Columns CSS for rendering PDF in wkhtmltopdf

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;

Text

@michal I maanged it by using manual approach – tajinder singh Jun 09 '20 at 12:13 — tajinder singh, Jun 09 '20 at 12:13
Can you add answer, how did you resolve it ? – michal Jun 09 '20 at 12:52 — michal, Jun 09 '20 at 12:52

score 1 · Answer 1 · answered Jun 13 '22 at 06:42

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>

Multi Columns CSS for rendering PDF in wkhtmltopdf

1 Answers1