0

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

Improve this question
1
  • 1
    You should be using the {} button in the question editor, or enclosing code/html in triple back-ticks ``` to get it to format as a block of code (to make things easier to read). I've done it for you this time, but this is something you should learn how to do yourself. Look at the help page on formatting for more general information about formatting with Markdown.
    – Derek F
    Jul 21, 2022 at 19:00

2 Answers 2

Reset to default
4

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

Improve this answer
1
3

For UTF-8 characters, you need to use the font Arial Unicode MS.

From SFDC Help and Visualforce doc

You need to use Arial Unicode Font as it is the only Unicode Font supported for Visualforce PDF Rendering. "Arial Unicode MS is the only multibyte font available. It’s the only font that provides support for the extended character sets of languages that don’t use the Latin character set."

@derekf answer is the correct answer with respect to CSS support

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .