Reputation: 1370
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
Upvotes: 8
Views: 10656
Reputation: 573
You need to use a fix width size.
body {
width: 22cm;
text-align: justify;
text-rendering: geometricPrecision;
}
Upvotes: 10
Reputation: 1993
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.
Upvotes: 1