text-align: justify; not working with wkhtmltopdf

匿名 (未验证) 提交于 2019-12-03 00:56:02

问题:

Good day!

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

I used custom font, added it by @font-face. All works fine for me, except one thing: 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: http://i.imgur.com/hE3xYxt.png

And in PDF I got this: http://i.imgur.com/S3KAPqg.png

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



回答2:

You need to use a fix width size.

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


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!