Flexbox wkhtmltopdf Rendering Issue

Question

I have a page that I am turning into a pdf with wkhtmltopdf. I have a 3 column layout and it works well in Chrome but the pdf is incorrectly generated. Is there an alternative to flexbox that would give the same view or a way to make flexbox work in wkhtmltopdf? Modernizr did not help. Thanks.

HTML:

<div class="header">
  <div id="name" class="center">
    <h2>
      Centered Text
    </h2>
  </div>
  <div id="links" class="left">
    <h3>
    Left Line 1
    <br>
    Left Line 2
    </h3>
  </div>
  <div id="contact" class="right">
    <h3>
    Right Line 1
    <br>
    Right Line 2
    </h3>
  </div>
</div>
</div class="clear"></div>

CSS:

.header {
  margin-top: 0;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

.center {
  order: 2;
  text-align: center;
}

.left {
  order: 1;
  float: left;
  text-align: left;
}

.right {
  order: 3;
  float: right;
  text-align: right;
}

.clear:before,
.clear:after {
  flex-basis: 0;
  order: 1;
}

.clear {
  clear: both;
}

Try to use Media query for print view. – Hujjat Nazari Nov 18 '15 at 16:15 — Hujjat Nazari, Nov 18 '15 at 16:15

score 15 · Answer 1 · answered Dec 12 '15 at 04:58

15

wkhtmltopdf uses an old version of WebKit and so you must use the original Flexbox spec, which is nowhere near as powerful but can still do some of the same effects.

Note, also, that you'll have to prefix lots of properties with -webkit-.

answered Dec 12 '15 at 04:58

TALlama

16,017
8
38
47

2

See also https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 and http://stackoverflow.com/questions/26036663/page-break-after-not-working-in-flexboxes. I'm using css-next and setting `Chrome >= 13` worked for me. – Steve Jul 18 '16 at 14:43
2

Can someone tell me why it uses an old version of WebKit? I keep seeing the reason that nothing works right is because of this, but no one says why it is an old version. – Arrow_Raider Jun 30 '21 at 17:55
@Arrow_Raider - Mostly because WebKit is abandoned, so there really isn't a proper current version to use. While lots of other things are derived from WebKit, they use forks, not the original QtWebKit, which is what wkhtmltopdf is based on. See https://wkhtmltopdf.org/status.html for the full story. – Ben Scott Oct 05 '22 at 16:15

score 4 · Answer 2 · answered Aug 04 '21 at 12:21

This specific comment in that issue brings a solution that worked for me: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1522#issuecomment-848651693

"to make work flex on wkhtmltopdf you need to use display: -webkit-box; for flex and -webkit-box-pack: justify; for justify-content: space-between;. So we should use old flex syntax"

Alvaro · Answer 3 · 2022-08-19T06:48:28.767

EDIT after comment from Ying-Shan Lin: As pointed out by TALlama, wkhtmltopdf uses an old version of WebKit.

I found this page that adds prefixes to you CSS and make it compatible with older versions of WebKit and other browser's engines.

Your code with CSS prefixes would be as follows:

.header {
  margin-top: 0;
  margin-bottom: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.center {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  text-align: center;
}

.left {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  float: left;
  text-align: left;
}

.right {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  float: right;
  text-align: right;
}

.clear:before,
.clear:after {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.clear {
  clear: both;
}

If the link becomes invalid, I just found it searching for "CSS autoprefixer" in Google, there you can find more options.

Note: This does not apply to your code, but it's worth to mention that I still encountered some problems with display:grid, so other people are aware of it.

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32472113) — Ying-Shan Lin, Aug 18 '22 at 08:55
Thanks, it did the trick for me and successfully converted 90% of the CSS — Valentin Nasraty, Apr 25 '23 at 16:41

Flexbox wkhtmltopdf Rendering Issue

3 Answers3

Linked