text-align: justify; not working with wkhtmltopdf

C

2

8

I'm creating PDF docs from HTML using wkhtmltopdf library. I used svg font according to this issue wkhtmltopdf custom font letter spacing

I used a custom font, and added it by @font-face. All works fine for me, except for text-align: justify is not working for some reason.

In HTML text is aligned as expected, but not in PDF.

Is anyone know how to fix this issue?

UPD: Added CSS and HTML example

<style type="text/css">
    @font-face{
        font-family:'source_sans_prolight';
        src: url('/font/sourcesanspro-light-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
    }

    @font-face{
        font-family:'Source Sans Regular';
        src: url('/font/sourcesanspro-regular-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
    }
    html, body, p, ul, li, span, img {
        margin: 0px;
        padding: 0px;
    }

    body {
        font-family: "Source Sans Regular", sans-serif;
        text-rendering: geometricPrecision;
    }
    .page {
        width: 729px;
    }
    .block {
        width: 300px;
        float: left;
        margin-right: 40px;
        text-align: justify;
    }
</style>
<div class="page">
    <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
    <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
</div>

HTML renders as expected: https://i.sstatic.net/n56PE.png

And in PDF I got this: https://i.sstatic.net/FhxsT.png

Cookstove answered 26/1, 2015 at 16:29 Comment(2)

Show a sample of the html you're using. That will help on debugging if necessary. – Aluino 26/1, 2015 at 16:46

@Aluino done, please check – Cookstove 27/1, 2015 at 8:48

A

1

Ok, I've tried this way, and it works for me :

<html>
  <head>
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
      @font-face{
        font-family:'source_sans_prolight';
        src: url('/font/sourcesanspro-light-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
      }

      @font-face{
        font-family:'Source Sans Regular';
        src: url('/font/sourcesanspro-regular-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
      }
      html, body, p, ul, li, span, img {
        margin: 0px;
        padding: 0px;
      }

      body {
        font-family: "Source Sans Regular", sans-serif;
        text-rendering: geometricPrecision;
      }
      .page {
        width: 729px;
      }
      .block {
        font-family: 'Source Sans Pro', sans-serif;
        width: 300px;
        float: left;
        margin-right: 40px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
    </div>
  </body>
</html>

Since I don't have the font I've added @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro); and I just added font-family: 'Source Sans Pro', sans-serif; to your .block css rules.
And I added basic some tags html head body to my sample.

Give it a try. And see if it's ok that way.

Aluino answered 27/1, 2015 at 9:41 Comment(5)

This works, but the font displays not as expected. We use only SVG for generating PDF because it is provide best match to design. If I add

url('/font/sourcesanspro-light-webfont.woff') format('woff'),     url('/font/sourcesanspro-light-webfont.ttf') format('truetype'),

Then align works, and in browser are correct font, but in PDF - not. Perhaps wkhtmltopdf has some settings to this? – Cookstove 27/1, 2015 at 10:17

Can't think of any settings that might be required for this. I think you might be hitting a bug or limitation of the library. I'd advice you to turn to their mailing list and their bug tracking in github. See wkhtmltopdf.org/support.html . Pdf generation from html is way cool but when you want to go pixel perfect things get tough real quick. Still, see what's already logged/discussed at the wkhtmltopdf home. Good luck ! – Aluino 27/1, 2015 at 10:28

It can be funny, but seems that there is some problems with fonts. I'll try download new ones. I'll let you know what the result. In any way - thank you for helping! – Cookstove 27/1, 2015 at 10:33

Ok, no problem. Do post what's the outcome of your effort. It'll be good to see what you get to with it. – Aluino 27/1, 2015 at 10:41

Unfortunately this solution doesn't work well for me, because font not renders in PDF correctly, so we should combine svg and woff/woff2 fonts to solve this issue. I'll accept you answer because it pushed me to combined solution. Thanks – Cookstove 28/1, 2015 at 19:30

S

10

You need to use a fix width size.

body {
    width: 22cm;      
    text-align: justify;
    text-rendering: geometricPrecision;
}

Sepal answered 3/2, 2017 at 14:47 Comment(2)

I just needed to add text-rendering: geometricPrecision;. – Tsarina 6/12, 2017 at 15:52

Adding "text-rendering" worked for me too. (I use jsoup+regex to automatically add it to any inline element that has this in the style attribute.) – Tameshatamez 10/6, 2021 at 23:56

A

1