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;
}

Pollinate

Try to use Media query for print view. – Billie

Answer 1

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

Bernardo

See also github.com/wkhtmltopdf/wkhtmltopdf/issues/1522 and #26037163. I'm using css-next and setting Chrome >= 13 worked for me. – Ithunn

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. – Benildas

@Benildas - 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 wkhtmltopdf.org/status.html for the full story. – Kent

Answer 2

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"

Taken

Answer 3

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.

Oestrin

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 – Doggo

Thanks, it did the trick for me and successfully converted 90% of the CSS – Oidea