Menu
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: http://i.imgur.com/hE3xYxt.png
And in PDF I got this: http://i.imgur.com/S3KAPqg.png
784
You need to use a fix width size.
body {
width: 22cm;
text-align: justify;
text-rendering: geometricPrecision;
}
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
