Problem styling visualForce page in PDF

csspdf

I have a visualForce page with good styling, but when I try to transform it into a pdf page, some of the css styling doesn't work anymore

here is my visualForce page:enter image description here

and the pdf version: enter image description here

as you can see, the title and the photo are not on th same line anymore and the text is not centered with the pho. The unicode characters are not present anymore. And the div1 and div 2 won't be on teh same line. I already use my inline CSS inside a <head> tag, wich worked for some of other CSS problems I had before, but some still persist.

Here i my style for the title part:

<head>
    .box{display: flex;
         vertical-align: middle; 
         justify-content: center; 
         align-items: center;}
    .title{font-size:32px; 
           font-family:calibri; 
           color:#2e1b5a;}
<head>
<div class="box">
    <span class="title">INSPECTION CERTIFICATE</span>
    <apex:image url="{!$Resource.logo}"/>
</div>

can anyone explain why my style doesn't work. And I don't tjhink it is a thing of CSS version, since flexbox are not a new thing for CSS

Best Answer

Salesforce uses the "Flying Saucer" library to convert Visualforce to PDF.

Flying Saucer only supports up to CSS level 2.1
display:flex; was introduced in CSS level 3

So if you want to convert a Visualforce page to a PDF, you'll need to stick to CSS 2.1 and earlier

Related Topic